Multiple header, footer, and h1 Elements: What Is Actually Accessible?

Source: Dev.to

The Core Principle: Semantics Over Superstition

HTML is not a set of fragile rules that break accessibility when slightly bent. It is a semantic language designed to describe the structure of a document.
The key question is not “how many of these elements am I allowed to use?” but “do these elements accurately describe the structure of the content?”

Multiple header Elements

Is it allowed? Yes. You can have multiple header elements in a single document. A header represents introductory content for its nearest sectioning ancestor, such as body, main, article, section, or nav.

Example

<header>
  <h1>Site name</h1>
</header>

<article>
  <header>
    <h2>Article title</h2>
  </header>

  <p>Article content…</p>
</article>

This structure is both valid HTML and accessible. Each header introduces its own section, and screen readers expose headers as structural landmarks tied to their sections.

Multiple footer Elements

Is it allowed? Also yes. Like header, the footer element is section‑scoped. A footer contains information related to its nearest ancestor section (author info, related links, metadata, etc.).

Example

<article>
  <p>Post content…</p>

  <footer>
    <p>Written by Alex</p>
  </footer>
</article>

<footer>
  <p>© 2026 Example site</p>
</footer>

Screen readers announce top‑level footers as landmarks; nested footers are treated as part of their section, which is expected behavior.

Multiple h1 Elements

Is it allowed? A strong yes. HTML5 explicitly allows multiple h1 elements. Each h1 represents the top heading of its sectioning context.

Example

<article>
  <h1>Article title</h1>

  <section>
    <h1>Introduction</h1>
    <p>…</p>
  </section>
</article>

<article>
  <h1>Another article</h1>

  <section>
    <h1>Overview</h1>
    <p>…</p>
  </section>
</article>

The Real Accessibility Question About Headings

The issue isn’t the number of h1s but whether the heading hierarchy makes sense. A good heading structure reflects the content hierarchy, avoids arbitrary level skipping, and clearly defines sections.

Poor Heading Structure

<h1>Main title</h1>

<h4>Subsection</h4>

Skipping levels creates confusion for screen‑reader users who navigate by headings.

Screen Readers and Navigation

Many assistive‑technology users navigate pages by headings, landmarks, or regions. Proper use of header, footer, and heading levels enables faster navigation, clear mental models of the page, and predictable reading order. The problem is not multiplicity; it is misrepresentation.

Practical Guidelines

• Use header and footer to introduce or conclude meaningful sections, not as generic wrappers.
• Headings should reflect the real structure of the page rather than visual styling choices.
• Prioritise clarity over rigid or outdated rules, and test heading navigation with a screen reader.
• If the structure makes sense to a human, it usually makes sense to assistive technology.

Conclusions

Using multiple header and footer elements is both valid and accessible when they correctly describe their respective sections. Multiple h1 elements are also allowed and often appropriate, especially in documents composed of distinct articles or regions.

Accessibility depends on providing a clear, logical hierarchy that accurately represents the content, not on counting elements. HTML accessibility is ultimately about expressing meaning rather than following myths or arbitrary conventions.