Is it OK to have multiple h1 tags on a page?

Yes, multiple h1 tags are permitted by the HTML standard, but "allowed" is not the same as "recommended". A page with several top-level headings gives screen reader users and crawlers no single obvious title for the content, and it usually signals a broken document outline. The reliable pattern is one descriptive h1 that names the page, followed by h2 and deeper levels that nest logically.

Why this matters

The HTML specification defines <h1> through <h6> as the six levels of section headings, and it does permit more than one <h1> on a page, provided they are not nested. MDN is blunt that this is still not best practice: a page should generally have a single <h1> that describes the content of the page, much like the document's <title>. It also records that nesting multiple <h1> elements inside nested sectioning elements was allowed in older versions of the standard, was never best practice, and is now non-conforming. The practical cost is navigation. MDN explains that a common technique for screen reader users is to jump from heading to heading to understand a page, and that most screen readers can generate an ordered list of all headings. When that list opens with three or four level-1 entries, the page has no clear start, and the list looks like several documents spliced together. The same outline is what user agents use to build a table of contents automatically. A single h1 followed by ordered h2 and h3 levels produces a clean tree; scattered h1s and skipped levels, such as jumping from h1 to h3, create gaps that leave users wondering where a heading went. Crawlers likewise benefit from a predictable, top-down hierarchy when they interpret what a page is about.

How to fix it

Give each page exactly one <h1> that states what the page is about, and make it match the intent of the <title>. Use <h2> for major sections and <h3>–<h6> for subsections, and never skip a level when going deeper: start at <h1>, then <h2>, then <h3>. If your template currently prints the site name or logo as an <h1> on every page, demote it — a logo is not the page's subject. Reserve heading elements for structure rather than for styling; MDN warns not to use headings to resize text, so set font-size in CSS instead. If a visual design needs a large heading-like label that is not a real section heading, use styled non-heading markup so it does not distort the outline.

<!-- correct outline: one h1, nested h2/h3, no skipped levels -->
<h1>Green dresses</h1>
  <h2>Fabric</h2>
  <h2>Sizing</h2>
    <h3>Petite</h3>
    <h3>Tall</h3>

<!-- incorrect: several top-level h1s -->
<h1>Green dresses</h1>
<h1>Fabric</h1>
<h1>Sizing</h1>

<!-- incorrect: skipped heading level (h1 then h3) -->
<h1>Green dresses</h1>
<h3>Sizing</h3>

How to verify the fix

Open the page in DevTools and read the outline, or use a headings list. The simplest source-level check is to count <h1 occurrences in the served HTML and confirm the number is one, then read the sequence of heading levels to confirm they descend without gaps. Check the rendered DOM as well as the raw source, because client-side rendering can add or remove headings after load. A screen reader's headings list is the ground truth for how the structure is announced.

# count h1 elements in the served HTML (expect 1)
curl -s https://www.example.com | findstr /I "<h1" | find /C /V ""

# inspect rendered headings in DevTools > Elements,
# or check the headings list in a screen reader

Related issues