Headings in sections

An article, posted 6 months ago filed in html, semantics, semantic, aria, accessibility, basics & xhtml.

Some observations on headings in sections elements in HTML.

Headings in sections

Below demonstrates that the h1-element adjusts it’s appearance level based on the section element. This is conform the standard. It is behaving like the h-element as I remember it being proposed with XHTML2. When inspecting the attributes in Firefox’s accessibility inspector, however, the level attribute is still equal to the element’s number. Also, this increase in appeared header-level doesn’t change for h2-elements and up.

Example

h1 in div-element

h2 in div-element

h3 in div-element

h1 in section-element

Not all h1 are equal

h2 in section-element

Notice how the h2 is like the h1 within the section

h3 in section-element

Code pen of this example

So what?

Discussion

When I discussed this in the Fronteers slack channel it was comfirmed that the change in size is purely a style difference. And has no semantic implications. I think this is bad.

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.