Headings for Developers

Estimated reading time: ( words)

Summary: Users of adaptive technologies, including screen readers and others, navigate pages via headings. You should mark up headings (H1) and subheadings (H2 - H6) using heading tags.

You should mark up headings in a logical order from H1 (usually the page title) to H2 to H3, and so on. Don't skip levels (e.g., going from H1 to H3), which can be confusing.

<h1>Page “Title” </h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Section</h2>

Note: The application or website title usually is not a heading. The H1 is usually the title of the individual page.

Don't select a heading level purely for how it appears in the browser. Instead, change the visual display (font-size, font-face, color, etc.) using CSS.

In addition to making webpages more accessible, using headings also can improve search engine optimization. Search engines like Google use headings to determine the content of your page.

Did you find what you were looking for?

Related articles

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.