Using div as a site wrapper with HTML5

Short answer: yes.

Sometimes just using <body> as a wrapper isn’t enough and using a <section> into a <section> is semantically incorrect. Sounds like <div> is an option, but is semantically right?

The HTML5 specification page in W3C adds the following note about the <section> element:

The section element is not a generic container element. 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 in the document’s outline.

In the other hand, about the <div> element the HTML specification explains:

The div element has no special meaning at all. It represents its children.

Then adds the following note:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

Basic example

<body>
   <div id="wrapper">
      <section>
      Bla bla bla...
      </section>
   </div>
</body>
This entry was posted in HTML5 and tagged , , , , , . Bookmark the permalink.