HTML5 5 article

HTML5 comes with a bunch of new elements and more will 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 question I found in the forums are: In what circumstances should we use these elements? And similarly How do we use this elements, correctly?

Section Element

This is probably one of the most ambiguous elements. How is it different to element? All these years we have used element for sectioning in our web structure, so when we should you 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 for 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:

• First, although the section element is technically style-able, but it is suggested to instead use when we are more likely will apply heavy styles or script to the element.
• Secondly, similar to
• element, the general idea of section element is to list content.

So in real cases, one of 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.