Design Heading Structure and Landmarks

Accessibility · accessibility, navigation, hierarchy

Updated 2026-07-28

Treat headings as the page outline, not as a font size menu. Many people navigate an unfamiliar screen by jumping heading to heading before they read a single sentence.
Give every page exactly one top-level heading that names the page. If the tab title and the first heading disagree, users landing from search or a shared link have to work out where they are.
Do not skip levels to get a smaller size. Style and structure are separate decisions, so pick the level that reflects the nesting and adjust the size with tokens.
Name the major regions of the page:

Label repeated regions individually. Three navigation regions that are all called "navigation" are no more useful than none.
Make sure every heading has content under it. An empty heading, or one used purely as a caption for a decorative block, sends users to a dead end.
Check the outline the way a user would experience it, as a flat list with no styling. If the list does not read like a table of contents, the page structure is wrong.

A clear outline is the fastest navigation you can give someone, and it costs nothing at runtime.