Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Headings have a purpose beyond their visual design as large bold text. They provide detailed information about a document's structure that can help users quickly understand the content of the page.

...

What is (or is not) a Heading?

Often a page has text that is visually styled in a way that visual users might understand them to be some sort of section title. Big bold text may look like a heading to visual users, but these are not headings. Screen readers will ignore the size and font-weight of the text.

This means the semantics of this visual design is not conveyed to non-visual users unless it is marked up in the HTML code as such. If obvious section titles are not encoded as headings, they are not headings.

In HTML5, headings are denoted with the <h1> to <h6> element tags. <h1> defines the most important heading. <h6> defines the least important heading.

...

Tip
titleBest Practice

Use only one top level heading (<h1>) with no other headings before this high level heading.

Avoid skipping heading levels. Always start from <h1>, next use <h2> and so on. When headings are nested, heading levels may be "skipped" when closing a subsection.

...

The preferred hierarchy is to use a single level <h1><h1> at the top of the page. All sections are then tagged <h2>.

...