The HTML spec used to define an outline algorithm that gave elements an implicit semantic heading level based on how many sectioning elements (
,
, and
) it was nested inside.
The browser rendering was such that section > h1 would have the same font-size and margin as
section > section > h1 would be represented as
, and so on. The default rendering was implemented in browsers in their UA styles, but not the heading level in the accessibility tree (what screen readers use). Websites started to use sectioning elements, but didn’t expect to see the automatic heading levels from the outline algorithm.
In general, this created confusion about where developers could use elements, tools handled the HTML differently, and the outline algorithm was considered problematic. The outline algorithm was removed from the HTML spec in 2022, but the UA stylesheet rules still remain. The rules in the default styles are what browser vendors are starting to remove now.
/* where x is :is(article, aside, nav, section) */
x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }
For example:
This looks as follows in the old UA styles:
The new UA styles will have this appearance:
And here’s the HTML example above with your browser’s default styles:
