HTML heading elements

Definition

Heading elements represent headings for their sections. The number indicates the rank in the hierarchy, not a visual style.

Syntax

<h1>City trail guide</h1>
<section>
  <h2>Accessible routes</h2>
  <h3>Lake loop</h3>
</section>

Context and content

Use phrasing content inside a heading. Pages should normally expose one clear top-level heading and nest later headings in order.

An H2 begins a major section below the page topic; an H3 subdivides that H2 section. When a new section returns to the previous level, return to H2 rather than continuing to H4. The hierarchy should describe the document even when all headings share the same visual style.

Accessibility

Many screen-reader users navigate by heading. A concise, ordered hierarchy makes that navigation predictable. CSS should supply appearance.

Headings also provide scan points for magnification, cognitive accessibility, reader modes, and search extraction. Keep them descriptive enough to make sense in a headings-only list. Avoid vague sequences such as “Overview,” “More,” and “Next” when specific topics are available.

The page heading

A page should normally have one clear H1 that names its unique purpose. HTML permits more than one H1, but a single page heading creates a more predictable outline across current browsers and assistive technology. Repeated site identity in the header does not need another H1.

The document title and H1 can differ because they serve different contexts, but they should describe the same resource. A search-oriented title must not promise content the visible heading and page fail to deliver.

Visual design

Style heading levels with CSS rather than selecting a rank to obtain a size. Responsive type should wrap without clipping at narrow widths and 200% zoom. Avoid fixed-height heading containers, forced line breaks that fail on smaller screens, and all-caps text without adequate readability.

Common misuse

Do not skip ranks only to obtain a smaller font. Do not put an entire paragraph inside a heading. Empty headings create misleading navigation stops.

Verification checklist

• Read only the headings and confirm they summarize the page.
• Check that one H1 names the unique page purpose.
• Verify level changes follow the section hierarchy.
• Inspect screen-reader heading navigation.
• Test long headings at 320 CSS pixels and 200% zoom.
• Confirm linked headings and anchored sections are not obscured by sticky UI.