Sectioning Elements

Robert Crowther Jan 2022

Last Modified: Feb 2023

This is not a definitive guide. See one of the modern HTML specs. However, I ask questions that rise in use.

Overview

Sectioning elements groups HTML into… sections. This information has some implications. Browsers are expected to gather the extent and structure of these elements into an HTML outline. Although not a day‐to‐day consideration, an outline may be visible for example, in assistive technology. Also, some elements that might seem to be sectioning content, because they group HTML, are not. Most of the time you do not need to know about this—but it is good to know you are not marking up in a way people may complain about.

I don’t bother much about outlines, My main concern is some general ideas about where where these elements should, or should not, be used.

Section and Article

Section and article elements seem easy to define,

article

A self contained work, such as a post, review, essay, story etc.

section

Part of a larger whole, such as a web‐page which is only ‘Page 2’ of a full article. Less obviously, the tabs on tabbed pages are usually sections of a whole.

Seems easy, yes? But there are places where the choices are not clear. The spec has a note on edge cases such as comments. It is also worth knowing that the spec makes free with use of the article element. In the section on the article element the spec gives an example of the article element used to define a user widget. In other words, the spec recommends using article elements where many people would use a div.

The web standards keep using the word ‘syndication’, which in this context means ‘information for sale’. I don’t know why that word made it’s way in, except that the the word is used by news organisations, where it is very important. Maybe the use is because of that?

Nesting

One place where the base definition can pull me up is in how article and section nest. Can they be nested? The spec says yes, within themselves,

…article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user‐submitted comments could represent the comments as article elements nested within the article element for the blog entry.
HTML living standard, ‘Section’

And presumably within each other. Yes, a one‐page article could contain sections within. Less obviously, a section may occasionally contain articles, as the above quote makes clear.

Leaf structure

Another place the ideas can become vague is when one idea crosses another as information structure refines downwards. Most obviously to me, paragraphs are a kind of text structuring, so surely they are sections?

No, they are not. In practice, section elements become recorded as part of the outline. Implementation aside, paragraphs are not section content anyway. In HTML they are a structure with defined reason, collections of ‘phrasal content’, used for breaking round lists and similar non‐text structures. In typography it is acknowledged paragraphs are an arbitrary structure for breaking text down a page. Either way, paragraphs are a device for structuring, not for content, but for visuals.

Other sectioning elements, aside and nav

Yes, there are other HTML elements that contribute to outlines or, can I say, information structure? The aside and nav elements,

aside: Yes, it’s a kind of section, but of information surplus/supplementary/of a different media, to the main content. I find little trouble using aside
nav: I find it useful to see nav as a section, it explains a lot. No you do not need nav round every link. Yes, it is for sections that are mainly concerned with navigation. Sp, nav sections may contain other info, like logos, explanatory text. But where you have a section that the main intention is navigation, you call it nav

The nav element specially, the semantic name tempts to overuse it. An ‘index’ should be a nav, but few headers need a nav, unless you wish to group many links. And a nav should never be used to wrap a header or footer, because that will create a new section.

Heading elements

Headings are not sections, but implicitly generate sections,

<h2></h2>
<p>A body in motion...</p>
<h1></h1>
...

makes,

<section>
  <h2></h2>
  <p>A body in motion...</p>
</section>
<section>
  <h1></h1>
  ...
</section>

I find there’s no need to think about this much.

HGroup

Well, it’s the weird unused one, isn’t it? I’ve never seen one in the wild, but I’m not well travelled. The hgroup element is classed as a kind of heading. It seems to be an attempt to extend the rigid 1–6 levels of header. Wrap hgroup round a set of headers and it takes the highest level of header (or lowest ordianl of header) as a base and treats the other headers as a new branch of subheaders.

In prectice, 1–6 headers is plenty for paper typography, but I suppose web layouts recommend and use many headers, so I can understand why the hgroup element exists

Non‐section grouping elements

Several elements group html but are not sectioning and do not contribute to outlines. Despite the fact they may seem to. They are,

body
main
menu
div

I think main and menu cause the most trouble,

main

Main is a problem. It could be used when people would use section or article. It shouldn’t be, it’s not sectioning element and will not appear in outlines. The examples given suggest it could be used where the content is little more than a list of attributes, so is too loose for an article. The main element must be placed where there is only an html or body above it, and there should only be one main element visible on a page. In general I’d avoid it, unless your page contents are lists only

menu

Menu, the HTML element nobody talks about. It’s for what people usually think of as a ‘topbar’, and suchlike—an unordered list of navigation items. It functions as an alternative to ul. You don’t believe me? Here’s the Living Standard,

The menu element represents a toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.

Can’t see you having any problems using it then, but can’t see much use for it either.

Refs

HTML Living Standard on hgroup,: https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
HTML Living Standard on section contents,: https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
Table in the Standard that describes the elements contributing to outlines,: https://html.spec.whatwg.org/multipage/sections.html#usage-summary-2