A question came up on Reddit recently from a developer who wasn't sure about when to use
<section> elements as opposed to a
<div>. I think this is a really good question and it seems that everyone uses it differently - I know I've got my own rules in my head about it. So I thought I'd take a deeper look at when to use
<section> element #
According to WHATWG (which is now the official HTML living standard): "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."
It goes on to list some examples of sections as being: "...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".
This makes sense but where should we draw the line on whether something should be a section? Well the spec also says the following: "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.".
Ok, but what is this document outline the spec refers to? Well, the document outline is meant to describe the structure of a webpage based on its headings and other landmark information.
Part of the idea of the document outline was that instead of setting discrete heading levels (e.g.
<h3>) an author could instead use multiple
<h1>s inside sectioning elements (such as
<section>) and the browser could work out the appropriate heading levels based on how far the content was nested.
Unfortunately, the document outline algorithm was never implemented in browsers (despite examples still appearing in the WHATWG spec) which means that
<section> doesn't have any of these superpowers. This makes it effectively a fancy wrapper element.
When to use the
<section> element #
Despite the lack of a document outline, I think it still makes sense to use
<section> to help separate large blocks of content on a webpage, even if the main benefit is just more readable code.
I think it also makes sense to also include a heading inside
<section> as this helps make it clear to the user that they are interacting with a different block of content.
<!-- section with a heading -->
<p>Check out our different levels of pricing....</p>
When to not use the
<section> element #
Since there isn't a clear cut rule about when to use the
<section> element, it makes sense to think about when another element would be the better choice instead. In HTML5 we have a bunch of other semantic elements (such as
<aside>), and if one of these is a better fit then go ahead and use it over
<section>. See Why you should choose HTML5 article over section.
Also note, that if you're just wrapping content for styling purposes then using a
<div> element (or multiple
<div> elements) is absolute fine and is in fact preferable to adding semantics where none is required.
<section> have any accessibility benefits? #
As far as I can tell, the
<section> element isn't used by assistive technology by default. However, if you give the section an accessible name (e.g. via
aria-labelledby) then it will be exposed as a region to screen reader users allowing them to jump to it via a keyboard shortcut.
This could be useful for important content which may be buried deep in a page such as a pricing table on a marketing site, or cart information on an e-commerce site.
<!-- Announced as 'legal region' in Voiceover -->
<h2 id="cart-info">Card Information</h2>
<p>Here are your order details...</p>
Finally, I started this article with a pre-conceived idea about the right way of using
<section> but it seems that there in fact isn't a clear answer and in the end it isn't really worth worrying about. Instead, there's plenty of other accessibility issues which will have a bigger impact on your website/app.