Skip to main content

Day 60 of 100DaysOfSpec, 4.3.3 The section element

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in The section element

Semantics with section are a bit tricky. The spec says that they are thematic groupings of content, rather than a shortcut for styling large chunks of the page that need to be visually separated in some way (how most people have ended up using them). The idea is that “the theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.” This seems a LITTLE fuzzy to me because I think it’s possible to have thematic groupings of content that don’t necessarily need an introductory h1-h6 tag. I’m thinking when this element was designed, the authors imagined applications for screen readers, feed readers, and other UAs that would parse web pages for consumption separate from their original styling.

With the examples they give, though (especially the one with the fruit), the section element by design can be almost as vague as the div but OMG DON’T JUST USE IT FOR STYLING.

By default, the section element’s ARIA role is “region” and shouldn’t be explicitly set (redundant).


My blog uses Webmentions. Responses from sites which likewise support Webmentions, such as Twitter or people’s personal sites, will show up here.

No Webmentions have been sent to this post yet.