How to correctly use “section” tag in HTML5?

The answer is in the current spec:

The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site’s
home page could be split into sections for an introduction, news
items, and contact information.

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
.

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. 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
.

Reference:

Also see:

It looks like there’s been a lot of confusion about this element’s purpose, but the one thing that’s agreed upon is that it is not a generic wrapper, like <div> is. It should be used for semantic purposes, and not a CSS or JavaScript hook (although it certainly can be styled or “scripted”).

A better example, from my understanding, might look something like this:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Note that <div>, being completely non-semantic, can be used anywhere in the document that the HTML spec allows it, but is not necessary.

Leave a Comment