The phantom life of the section element and the mess of headings
As far as what gets programmatically exposed to assistive technologies (AT), there is no discernible difference between the
<div>that contain their respective
Should we simply therefore discard
section and replace it with
div? Scott argues no, because it’s still more meaningful than
div, and could be used for other programmatic purposes.
One such purpose might be parsing articles and re-displaying them free of ads and poor typography, as Pocket does. However, we have a relatively well-establised set of class schemas to structure articles, especially
h-entry, so it’s hard to see a developer using an inconsistently adopted alternative.
Perhaps a more pertinent question would be is there any reason to start using
section? The answer is probably yes, but it does perhaps demonstrate how HTML5’s promise of a more semantic web never quite developed in the way we thought it might.
In fact, it’s a bit of a mess. Scott’s post reminds us that while we can use
section within, say, an
article, we can’t use
header (as I do on this site) because its scope isn’t defined by its parent. That means you should only use one, top level
header on a page, which will in all likelihood house information such as the site title, logo and navigation.
While most sectioning elements such as
article do expose a document structure to AT, and should, in theory, convey a hierarchy of nested articles, footers, sections etc., you’ll still need to remember to maintain a separate heading hierarchy.
If sectioning elements worked as they should, we’d only ever need to use
h1s. But AT and search engines see headings, rather than sectioning elements, as the markers of new sections, so a document consisting solely of
h1s would appear flat.
We’ve therefore ended up with a slightly weird, hybrid structure for pages that contain an article. I think this example is right:
<header> <!-- logo, title, nav etc. on every page --> </header> <main> <article> <div> <!-- header grouping, no headers here! --> <h1> <!-- title --> <p> <!-- some meta --> </div> <div> <!-- main content grouping, wouldn’t a <content> element be useful? --> <section> <!-- Let’s use it! --> <h2> <!-- section title, not an h1? --> <section> <!-- sub-section --> <h3> <!-- headings ignore sections --> </section> </section> </div> <footer> <!-- some more meta info, comments --> <h2> <!-- comments heading --> <article> <!-- a comment --> <h3> <!-- headings ignore every sectioning element! --> <p> <!-- the comment --> </article> </footer> </article> </main> <footer> <!-- site wide (c) info, tool menu --> </footer>