A Look Into: HTML5 <article> and <section> Elements

A Look Into: HTML5
and
Elements

www.hongkiat.com hongkiat.com3 months ago in #Web Design Love59

HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in their implementation, including the following two new elements: and . Some most frequently asked questions I found in the forums are: In what circumstances should we use these elements? And similarly, How do we use these elements correctly? A Look Into Proper HTML5 Semantics A Look Into Proper HTML5 Semantics If you carefully plan the structure of your HTML documents, you can help computers make sense of the… Read more Element This is probably one of the most ambiguous elements. All these years, we have used element for sectioning in our web structure. So the question arises as how is it different than element and when should we use this element apart from element. To demystify it, we need to refer to the official documentation. According to WHATWG documentation, the is described as follows: “The element represents a generic section of a document or application. ~ WHATWG” From that description we can conclude that the element is definitely intended for sectioning, more or less like a element. But there is an exception to it. The documentation added some specific extra note that said: “When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead…A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly… ~ WHATWG” At this point, things got lighter, and we can summarize that description in two points: Although the section element is technically styleable, it is suggested to use instead when we are more likely to apply heavy styles or script to the element. Similar to element, the general idea of section element is to list content. So in real cases, one of the sensible reason to use element is to structure list of blog post content, as shown in the following code snippet: Blog Post Title Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. Blog Post Title Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. Blog Post Title Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. This is just an example; we can use this element for other purposes. Element The name itself is quite self-explanatory, but let’s see how the official documentation describes it: “A self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.“ From the above explanation, we can conclude that element is exclusively recommended to be used for structuring articles, especially the article that we are likely to syndicate, such as a blog post, page content, or forum posts. The following example shows how we structure a blog post content with . This is Blog Post Title Author Name Save in Categories Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.  » Read More

Like to keep reading?

This article first appeared on hongkiat.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply