CodeParkUse one clear h1 for the page topic. Then use h2 for major sections, h3 for subsections, and so on. Don't skip levels, for example from h2 straight to h4. Choose the level for the structure, and change the look with CSS.
Nesting an h1 inside each section does not create a proper outline. An old HTML5 idea, the "document outline algorithm", said that every section restarted the heading levels. Then each section could use h1. Browsers and screen readers never implemented it, and it has been removed from the HTML spec. Assistive technology uses the heading level you write. So a page full of h1 elements looks flat, with no structure.
This matters because screen reader users often move around a page by its headings. They jump from heading to heading, or open a list of all headings to understand the page.
- Use a logical
h1toh6order, and don't skip levels. - Pick the heading level for structure, and use CSS for the look.
- The HTML5 outline algorithm never worked in browsers and was removed from the spec.
- Screen reader users move around a page by its headings.