When To Use The Section Element

A closer look at how and when to use the <section> element. When it comes to structuring content in your document, it is more than just an easy replacement for <div> elements.

A More Semantic Web

The term "semantic" is tossed around pretty freely these days (you'll find it in my portfolio's intro paragraph). But are we using it correctly? And more importantly, have we adopted the philosophies of those who paved the way like Jeffery Zeldman or Dan Cederholm, writing better code that is flexible, scales well, and isn't completely unreadable to the next developer?

The introduction of new HTML5 elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> have certainly helped us get that much closer to the semantic web we all strive for. Thus, <div> elements every were soon replaced with their new HTML5 counterparts. Gone are the days of the <div id="header">. But as expected, there is still a lot of confusion out there as to how to properly use some of these elements, especially the <section> element.

How To Use The Section Element

When I first read about the <section> element, I did what probably a lot of you did as well. I started replacing my sectioning <div> elements with <section> elements and called it a night. Boy did I get it wrong. There's much more to it than that. And for good reason. Let's take a look at a hypothetical HTML5 document layout for a blog:


<header>
  <h1>Page Name</h1>
  <nav>
    . . .
  </nav>
</header>
<section id="main">
  <article>
    <h1>Article Title</h1>
      . . .
    <h2>Article Subsection Title</h2>
      . . .
    <h2>Article Subsection Title</h2>
      . . .
  </article>
  <article>
    . . .
  </article>
  <article>
    . . .
  </article>
</section>
<footer>
  . . .
</footer>

At first glance there seems to be absolutely nothing wrong with the above example. It's clean, uses new HTML5 elements in place of <div> elements for structuring content, and for the most part it is fairly semantic (if I may toss that word out there once more). But it misses the point of the <section> element by treating it just as you may have once treated the <div> element. Let's go to the spec for some clarification:

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of 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.

W3C Specification

There are two takeaways that jump out at me from the W3C spec. Each <section> element should contain a heading element, and more importantly: the <section> element is not a generic container element. After all, isn't that what the <div> element is for? So let's take a look at the example HTML5 blog layout again, this time we'll apply the principles mentioned in the spec:


<header>
  <h1>Page Name</h1>
  <nav>
    . . .
  </nav>
</header>
</main>
  <article>
    <header>    
      <h1>Article Title</h1>
      . . .
    </header>    
    <section>    
      <h2>Article Subsection Title</h2>
      . . .
    </section>    
    <section>    
      <h2>Article Subsection Title</h2>
      . . .  
    </section>    
  </article>
  <article>
    . . .
  </article>
  <article>
    . . .
  </article>
</main>
<footer>
  . . .
</footer>

Now that makes a lot more sense when you step back and look at it through the lens of a semantic coder. To start, I swapped out the <section id="main"> with the much more semantic <main> element (an HTML5 element I literally just discovered while writing this article by the way). I then structured the <article> block further with the addition of a <header> element to wrap the title of the article and it's introduction, and then wrapped the remaining subsections in <section> elements.

Final Thoughts

It's easy to make the assumption that less is more when it comes to writing clean code. And in a lot of ways that's absolutely true. We've all come down with a mad case of divitis at one point in our careers or another. But in the case of the <section> element, it was introduced into the spec for the purpose of helping us add more structure to our documents. As the spec suggests, <section> elements should be used almost in conjunction with heading elements throughout your document (think of it in this way - <h> elements have always been a way to introduce a new section in your content, now we can start to wrap it and the content below it in it's own <section> block). Most importantly (and this applies to a lot of the new HTML5 elements), the <section> element is not a generic container element.

So there you have it. It's easy to take these new elements, go through your document and quickly replace your old structuring <div> elements with the it's more appropriate successor. But these elements are intended to add more structure to our documents than we ever have before, and that means we have to start thinking about our document structures differently. Often it means adding more elements to the page to further structure content that we once wrapped in a single <div>. At the end of the day, your documents will be cleaner, more organized, and of course - more semantic.

comments powered by Disqus