The section element

by .

Updated 22/01/2014 by Dr. Steve

We doctors are a bunch of chums using HTML5 and writing about how we do it. Apart from spurious requests for medical advice, the questions we receive most are about using the section element, and we realise that we’ve been using the section element incorrectly all this time.

Sorry.

What we’ve been doing wrong is using section to wrap content in order to style it, or to demarcate the main content area from the nav, header, footer etc. These are jobs for div, not section.

The section spec says

The section element represents a generic document or application section…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.

section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):

<body>
...
<section>
<h2>level of heading = section nesting level</h2>
rest of the content
</section>
...
</body>

With very few exceptions, section should not be used if there is no natural heading for it.

The spec says

The theme of each section should be identified, typically by including a heading (h1h6 element) as a child of the section element.

Check your work in the HTML 5 outliner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however).

Section is also the most generic of the sectioning elements. Make certain that you don’t really need an article, which is defined as

a complete, or 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.

What about main content?

Use the main element to mark up the main content area of a document. Dr. Rich Clark explains how to use The main element

Rules of thumb for using section

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

  • Don’t use it just as hook for styling or scripting; that’s a div
  • Don’t use it if article, aside or nav is more appropriate
  • Don’t use it unless there is naturally a heading at the start of the section
  • The revised spec (as of ) says:

    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.

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

Thanks to Opera’s Lachlan Hunt for fact-checking this article. Please also note that we haven’t yet changed the WordPress theme to get rid of extra sections, so for now please do as we say and not as we do!

179 Responses on the article “The section element”

  • […] This post was mentioned on Twitter by Remy Sharp. Remy Sharp said: Confused about the section element? @brucel doctor (whose bio is definitely getting longer) comes to the rescue: http://bit.ly/4kfvxY […]

  • Mike T. says:

    I’m interested in the cases where a section element wouldn’t have a heading. Anyone care to shed some light?

  • […] The section element. Useful article by Bruce Lawson on the correct use of the HTML5 <section> element, with a good tip about using the HTML5 Outliner tool to check your content for untitled sections as a way of identifying (possibly) incorrect usage. I may need to update the source of this site a bit! […]

  • Paul Burgess says:

    I am still a bit confused… when you say

    “section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):”

    In a real world application would it be used for say… the intro/excerpt part of a blogpost for instance? Is that a blob? Your code example seems to be just the whole page content surrounded by

    Am I missing something?

  • Joseph says:

    Mike,

    I am guessing in the instance that the element does not have or need a heading, you would not use a section element.
    As well as the new elements introduced in HTML5, div is still signifcant

  • Mike T. says:

    @Joseph,

    I think that’s a good rule of thumb that probably will cover most use cases.

    However, the spec does say A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.. (emphasis mine)

    Typically does not mean always, so presumably there exists a case where a headless section is warranted. Just trying to figure out what that might be.

  • Lachlan Hunt says:

    Mike, cases where a section wouldn’t have a heading are generally more relevant to web applications, as opposed to more traditional document structures.

  • Mike T. says:

    @Lachy

    Thanks! I need to remind myself that HTML5 ~= Web Applications 1.0. :)