HTML Child / Structure and Outline

Headings are a hierarchy, not a set of font sizes

The most useful structure on any page is the one nobody has to see to use.

Headings exist to build an outline. The top level names the page. The next level names its major sections. The level below that names subsections inside those sections, and so on downwards, in order, without skipping. Done properly, a reader can perceive the shape of an entire long document without reading a word of the body, and somebody using a screen reader can list every heading and jump straight to the part they want. It is the closest thing the web has to a table of contents that maintains itself, and it costs nothing beyond a little care about which level you choose.

The mistake to watch for is choosing a heading level because of how large it renders. If a subsection needs to look smaller, that is a question about appearance and it has its own answer. Dropping two levels to get the size you wanted breaks the outline for everybody who relies on it, and it does so silently. The reverse mistake is just as common: making everything the top level because everything feels important. An outline in which nothing is subordinate to anything else is not an outline, it is a list of shouts, and it conveys no structure at all.

A good habit is to write the headings before you write the content. Put down the top level, then the sections, then the subsections, and read the result back as a bare list. If that list tells the story of the page in the right order and at the right depths, the document has a spine. If reading the list leaves you confused about what belongs to what, the page is confused too, and no amount of body text will fix it. The outline is not a decoration on the writing. It is the writing, seen from above.