HTML Headings Table
| Element | Role | Field note |
|---|---|---|
<h1> | Page title - one per page | The strongest on-page signal; match the title tag's intent |
<h2> | Major sections | The workhorse - scannable outline lives here |
<h3> - <h6> | Nested subsections | Depth follows document structure, not font size |
Skip a level? | h2 then h4 = accessibility failure | Screen readers announce the jump as a missing section |
Headings for style? | Never - that is CSS's job | An h3 that is really a small label poisons the outline |
Heading order signal | Google uses headings for snippets | Jump links (jump to section) are built FROM the outline |
h1 in every section? | No - one per page in HTML5 practice | Section-scoped h1s never caught on; assistive tech flattened them |
Headings are the document outline: h1 through h6 turn a wall of text into a navigable structure that screen readers hop through, search engines summarize, and browsers turn into jump menus. The table below is the working seven rules - the ones that make the same six tags deliver free accessibility, free SEO and free navigation at once.
Bottom line: one h1 per page (the page title), h2 for major sections, h3 through h6 nested beneath their parents - and the level order must never skip. An h2 followed by an h4 announces a missing section to screen readers, and search engines read the same jump as a structure error. Headings carry structure; their size is CSS's business entirely.
The honest part: the most common heading bug is styling-driven - a designer wants small text and reaches for h4, or wants big text and wraps a label in h1. Every heading tag placed for its default font size poisons the outline for everyone navigating by it. If the visual size is wrong, restyle the heading; if the semantics are wrong, no amount of styling fixes it.
How to use
- Write the outline first: the h1 as the page's title, h2 for each major section, h3 for subsections within them.
- Audit the level sequence: every heading should be the same level, one deeper, or returning up - never a skip downward.
- Separate semantics from styling: headings for structure, CSS classes for appearance - and let assistive tech navigate the result.
Frequently asked questions
How many h1 elements can a page have?
One, in practice. HTML5's section-scoped h1 model (each article or section could have its own h1) was implemented inconsistently by assistive tech and effectively abandoned - every major audit and search engine guidance now treats the h1 as the single page title. Multiple h1s flatten the outline: screen readers cannot tell which is the page's subject, and search engines lose the primary topic signal. Start with one h1, nest h2s beneath it.
Why is skipping a heading level a failure?
Because the outline IS the navigation: a screen reader user pressing H hops heading-to-heading, and the level announces the hierarchy - 'heading level 2, Shipping Options'. An h4 following an h2 announces level 4 with no level 3 ever existing, reporting a subsection whose parent section is missing. Search engines read the same gap as a structure error. The fix is mechanical: audit the sequence so each heading is the same level, one deeper, or moving back up.
Do headings still matter for SEO?
Yes, as structure rather than as a keyword slot. Headings tell crawlers what the page considers important - they feed snippet generation and the jump-to-section links shown in search results, and they anchor topical coverage. Keyword-stuffed headings do nothing (the content beneath them does the work), but a page whose h1 and h2s sketch a coherent outline is easier to crawl, easier to summarize and easier to feature. The heading outline is the cheapest SEO that exists.
Can I use a heading just to make text bigger?
No - that inverts the contract. Heading tags say 'this is a section of this rank in the document'; their visual size is the browser's default guess that your CSS overrides. An h3 wrapped around a small button label inserts a phantom section into the outline and announces it to every screen reader. If the design needs small text, a paragraph or span with a CSS class gets exactly the size without lying about the structure - and if the structure needs a heading, CSS can make an h2 look as small as the design wants.