When to Use the HTML5 SECTION Element

And When to Use ARTICLE, ASIDE, and DIV

HTML 5 Logo

WC3

The new HTML5

SECTION
element can be somewhat confusing. If you've been building ​HTML documents before HTML5, chances are you are already using the element to create structural divisions within your pages and then style the pages with them. So it might seem like a natural thing to simply replace your existing
DIV
elements with
SECTION
elements. But this is technically incorrect. So if you don't just replace
DIV
elements with
SECTION
elements, how do you use them correctly?

The SECTION Element Is a Semantic Element

The first thing to understand is that the

SECTION
element is a semantic element. This means that it provides meaning to both user agents and humans about what the enclosed content is—specifically a section of the document.

This may seem like a very general semantic description, and that's because it is. There are other HTML5 elements that provide more semantic distinctions to your content that you should use first before you use the

SECTION
element:
  • ARTICLE
  • ASIDE
  • NAV

When to Use the SECTION Element

Use the

ARTICLE
element when the content is an independent part of the site that can stand alone and be syndicated like an article or blog post. Use the
ASIDE
element when the content is tangentially related to either the content of the page or the site itself, such as sidebars, annotations, footnotes, or associated site information. Use the
NAV
element for content that is navigation.

The

SECTION
element is a generic semantic element. You use it when none of the other semantic container elements are appropriate. You use it to combine portions of your document together into discrete units that you can describe as related in some way. If you can't describe the elements in the section in one or two sentences, then you probably shouldn't use the element.

Instead, you should use the

DIV
element. The
DIV
element in HTML5 is a non-semantic container element. If the content you are trying to combine doesn't have a semantic meaning, but you still need to combine it for styling, then the
DIV
element is the appropriate element to use.

How the SECTION Element Works

A section of your document can appear as the outer container for articles and

ASIDE
elements. It can also contain content that isn't part of an
ARTICLE
or
ASIDE
. A
SECTION
element can also be found inside an
ARTICLE
,
NAV
, or
ASIDE
. You can even nest sections to indicate that one group of content is a section of another group of content that is a section of an article or the page as a whole.

The

SECTION
element creates items inside an outline of the document. And as such, you should always have a header element (
H1
through
H6
) as a part of the section. If you can't come up with a title for the section, then again the
DIV
element is probably more appropriate. Remember, if you don't want the section title to appear on the page, you can always mask it with CSS.

When Not to Use the SECTION Element

Beyond the advice above to use the more specific semantic elements first, there is one definite area that you should not use the

SECTION
element: for style only.

In other words, if the only reason you're putting an element in that place is to attach CSS style properties, you should not use a

SECTION
element. Find a semantic element or use the
DIV
element instead.

Ultimately It May Not Matter

A difficulty in writing semantic HTML is that what is semantic to me may be utter nonsense to you. If you feel that you can justify using the

SECTION
element in your documents, then you should use it. Most user agents don't care and will display the page as you might expect whether you style a
DIV
or a
SECTION
.

For designers who like to be semantically correct, using the

SECTION
element in a semantically valid way is important. For designers who just want their pages to work, that isn't as important. We believe that writing semantically valid HTML is good practice and keeps the pages more future-proofed. But in the end it's up to you.