# Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).

> Canonical HTML version: https://rocketvalidator.com/html-validation/consider-using-the-h1-element-as-a-top-level-heading-only-all-h1-elements-are-treated-as-top-level-headings-by-many-screen-readers-and-other-tools
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML heading elements `<h1>` through `<h6>` define a document's heading hierarchy. The `<h1>` element represents the highest-level heading, and each subsequent level (`<h2>`, `<h3>`, etc.) represents a deeper subsection. This hierarchy is critical for both accessibility and document structure.

The HTML5 specification once introduced a "document outline algorithm" that would have allowed multiple `<h1>` elements to be automatically scoped by their parent sectioning elements (`<section>`, `<article>`, `<nav>`, `<aside>`). Under this model, an `<h1>` inside a nested `<section>` would be treated as a lower-level heading. However, **no browser or assistive technology ever implemented this algorithm**. The outline algorithm was eventually removed from the WHATWG HTML specification. In practice, screen readers and other tools treat every `<h1>` on a page as a top-level heading, regardless of nesting.

This matters for several reasons:

- **Accessibility:** Screen reader users frequently navigate by headings to get an overview of a page's content. When multiple `<h1>` elements exist, the heading list becomes flat and unclear, making it difficult to understand the page's structure and find specific content.
- **SEO:** Search engines use heading hierarchy to understand page structure and content importance. Multiple `<h1>` elements can dilute the semantic signal of your primary page topic.
- **Standards compliance:** While using multiple `<h1>` elements is not a validation error, the W3C validator raises this as a warning because it is widely considered a best practice to reserve `<h1>` for the single, top-level page heading.

To fix this warning, follow these guidelines:

1. Use exactly one `<h1>` per page to describe the main topic or title.
2. Use `<h2>` for major sections beneath it, `<h3>` for subsections within those, and so on.
3. Don't skip heading levels (e.g., jumping from `<h1>` to `<h3>` without an `<h2>`).

## Examples

### Incorrect: Multiple `<h1>` elements

This example uses `<h1>` inside each sectioning element, which triggers the warning. Screen readers will present all three headings at the same level, losing the intended hierarchy.

```html
<h1>My Blog</h1>
<section>
  <h1>Latest Posts</h1>
  <article>
    <h1>How to Write Accessible HTML</h1>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h1>Understanding CSS Grid</h1>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>
```

### Correct: Proper heading hierarchy

Use a single `<h1>` for the page title and nest subsequent headings using the appropriate levels.

```html
<h1>My Blog</h1>
<section>
  <h2>Latest Posts</h2>
  <article>
    <h3>How to Write Accessible HTML</h3>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h3>Understanding CSS Grid</h3>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>
```

### Incorrect: `<h1>` nested inside a section without a parent heading

Even a single `<h1>` nested deeply inside sectioning content can trigger this warning if the structure suggests it is not the page's primary heading.

```html
<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>
```

### Correct: Section with its own heading and properly ranked article heading

```html
<section class="about">
  <h1>About</h1>
  <article>
    <h2>Article heading</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>
```

### Correct: Full page structure with clear heading hierarchy

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Company Homepage</title>
</head>
<body>
  <header>
    <h1>Acme Corporation</h1>
  </header>
  <main>
    <section>
      <h2>Our Services</h2>
      <h3>Web Development</h3>
      <p>We build modern, accessible websites.</p>
      <h3>Design</h3>
      <p>Our design team creates beautiful interfaces.</p>
    </section>
    <section>
      <h2>About Us</h2>
      <p>We have been in business since 2005.</p>
    </section>
  </main>
</body>
</html>
```

In this structure, screen readers will present a clear, navigable outline: one top-level heading followed by properly nested subheadings that reflect the logical organization of the content.