journal

The DIV tag roles in HTML5

As HTML5 comes to the stage after XHTML, there’re some new elements come with HTML5, so what does the DIV tag role in HTML5 now?

Before we get started to answer this question, let’s take a look at another question first (a good question asked from my talented friend Will Dawson.):

Does the Section tag replace a Div?

So let me try to answer this question:

the short answer is: yeah, maybe, somewhat.
the long answer is, let me have it as 4 parts:

  1. Description of the Section tag;
  2. Use for;
  3. Don’t use for;
  4. When use the Div tag instead of the Section tag?

1. Description of the Section tag:

The Section spec says

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading… A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

and Steve Smith says

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

So I think the Section tag acts separating off a portion of the document, its job is just for holding a thematic grouping of content or called “generic document” – the “generic document section” is that of main content, not for defining logical divisions within the content of a page or not is needed for styling purposes.

2. so we can use Section for:

  • an individual content, for example:
    
    <section>
    <h1>Any level of heading</h1>
    rest of the content
    </section>
    
    

    section example
    image from A List Apart

    section example 2
    image from Smashing Magazine

  • document’s body, for example, the post list of a bolg;

    section example 3
    image from html5doctor

3. don’t use for:

  • replacing div if an element is for styling or scripting or wrapping the blocks;
  • replacing article, aside or nav or something like that if the element is more appropriate to those tags;
  • containing the document if there is not naturally a heading at the start of the section.

And see the Section spec‘s note:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

And Bruce Lawson says

As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.

4. When use the Div tag instead of the Section tag?

so, we’re clear with it now, if an element is needed for styling or scripting or wrapping, use Div instead.

Because the Section Spec says

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

OK, let us be clear about What Div is and roles in XHTML.

About.com says

Description of the DIV Tag:

The div tag in XHTML is a tag that defines logical divisions within the content of a page. What this means is that a div tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the div tag when you want to center a block of content or position a content block on the page.

It’s a good idea to label your div tags as you place them in your document. For example, if you’re defining the main content area of your site, you should name that DIV tag: “maincontent”.
<div id=“maincontent”>

If you nest your div tags, be sure that you know where your content is going (in other words, which div it should be part of).

So based on all the explanation above, I think the Div tag roles in HTML5 is to:

  • define sections of a Web page to make it easier to manage, style and manipulate.
  • wrap an element if the content(element) provides no semantic value by itself (no other tag applies to it).

References

Let me know what you think, please leave the comment!