A few links about headings that I’ve had stored under my top hat.

“Page headings don’t belong in the header”

Martin Underhill:

I’ll start with where the

should be placed, and you’ll start to see why the isn’t the right location: it’s the header for the page, and the main page content should live within the

element.

A classic conundrum! I’ve seen the main page heading (

) placed in all kinds of places, such as:

– The site (wrapping the site title)
– A nested in the

content
– A dedicated outside the

content

Aside from that first one — the site title serves a different purpose than the page title — Martin pokes at the other two structures, describing how the implicit semantics impact the usability of assistive tech, like screen readers. A is a wrapper for introductory content that may contain a heading element (in addition to other types of elements). Similarly, a heading might be considered part of the

content rather than its own entity.

So:

Page heading

Page heading

Like many of the decisions we make in our work, there are implications:

– If the heading is in a that is outside of the

element, it’s possible that a user will completely miss the heading if they jump to the main content using a skip link. Or, a screenreader user might miss it when navigating by landmark. Of course, it’s possible that there’s no harm done if the first user sees the heading prior to skipping, or if the screenreader user is given the page Previous