DEV 5.2 Construct proper headings

Many people rely on headings to interpret the structure of the page.

Without headings, some people (e.g. Screen reader users) cannot easily browse the contents of the page (e.g. By skipping to and reading just the headings or by listing all the headings to get an idea of the contents of the page).

  • Use <h1><h2> ... <h6> to provide structure to web pages:
    • All pages should include <h1> for the primary page heading;
    • Ideally only 1 heading should be coded with <h1> per page;
    • Avoid skipping levels, e.g.
      • <h1><h3> should not follow sequentially (skipping the <h2>;)
    • Style with css:
      • don't use presentation markup to simulate headings.
  • Don't use heading markup to produce presentational effects:
    • only use the heading tags for headings - nothing else.

Video clip

Watch a screen reader user use headings to quickly navigate through a page.