HTML Headings

Create a logical page outline with headings.

Headings name the page and its sections. The six levels, h1 through h6, express hierarchy rather than visual size. A logical outline helps readers scan, lets screen-reader users jump between sections, and gives search engines a useful summary of the page.

Create a page outline before writing details

Begin with one descriptive h1 for the page’s main purpose. Use h2 for major sections, h3 for subsections inside an h2, and continue only when the content genuinely needs another level.

<main>
  <h1>City cycling guide</h1>

  <section>
    <h2>Choose a bicycle</h2>
    <h3>Commuter bikes</h3>
    <h3>Folding bikes</h3>
  </section>

  <section>
    <h2>Plan a safe route</h2>
  </section>
</main>

• Describe the page clearly in h1.
• Use h2 for each main section.
• Nest h3 beneath the h2 it explains.
• Keep heading text concise and specific.
• Do not use an empty heading for spacing.

Use headings as navigation

Many assistive-technology users open a heading list to understand and navigate a page. Vague labels such as “More” or repeated headings such as “Details” remove that benefit. Each heading should make sense when read outside its visual context.

<!-- Vague -->
<h2>More</h2>

<!-- Informative -->
<h2>Accessibility testing tools</h2>

<!-- A card title can be a heading when it starts a real section -->
<article>
  <h2>Semantic portfolio project</h2>
  <p>Build a structured personal site.</p>
</article>