One H1 per page is not a rule

The old reason died

Years ago, search engines weighted the first H1 heavily because HTML4 was a mess and sites rarely used semantic markup correctly. One H1 at the top was a decent heuristic for "this is the main topic."

HTML5 introduced sectioning elements. Each `<section>` or `<article>` can have its own H1 and the browser builds a logical outline from the nesting. Search engines parse this fine. The rule expired.

What actually matters now

Heading hierarchy. Not quantity.

H1 → H2 → H3 in a logical cascade. Don't skip levels. Don't use H4 under H2 because you liked the font size. If your design needs an H4 there, your structure needs an H3 parent first, or you're just using headings as bold text.

Search engines and assistive tech navigate by heading structure, not by counting H1s. A page with three H1s that each introduce a clear section is cleaner than a page with one H1 and then fifteen H3s scattered randomly because someone heard "don't skip levels" but didn't understand it.

When multiple H1s make sense

Long pages with distinct sections. Each section gets an H1, subsections get H2s under them. Wrap each section in a `<section>` tag if you want to be technically tidy, but even without it, modern parsers handle multiple H1s fine.

Blog indexes or card grids. Each article preview can have an H1 title. It's a list of distinct content chunks. The hierarchy is flat by design.

Sidebars with independent widgets. If your sidebar has a newsletter signup and a "Recent Posts" list, those can each have an H1. They're not subordinate to the main content; they're parallel.

When one H1 still works

Short pages. Single-topic landing pages. Simple articles. If the page has one clear subject and everything flows from that, one H1 is clean and sufficient. You're not violating anything by stopping there.

The mistake is making it a rule instead of a choice.

What breaks hierarchy

Skipping levels. H1 jumps to H4 because the design wants smaller text. Fix the CSS, not the HTML.

Using headings for style. Bold text is not an H3. If it's not introducing a subsection, it's a `<strong>` or a styled `<p>`.

Nesting incorrectly. H3s should be children of H2s, not siblings at the same indent level. If your outline looks wrong in a table of contents, your headings are wrong on the page.

How to audit your current site

Install a browser extension that shows heading structure — HeadingsMap or similar. Open your top ten pages. Look at the outline view.

Does it make sense as a table of contents? If you collapsed everything but the headings, could someone navigate the page logically? If yes, you're fine. If no, fix the nesting, not the H1 count.

Stop checking the rule

No one enforces single-H1 anymore. Not W3C validators, not search engines, not accessibility audits. If your CMS or your style guide still mandates it, you're following outdated doctrine.

Focus on hierarchy. Let the structure serve the content. If that means three H1s, ship three H1s.