Heading Structure
Definition
HTML offers six heading levels, H1 down to H6, and their numbers describe rank rather than size. Convention gives a page one H1 naming the whole document, H2 elements for its main sections, and H3 elements for subsections inside those. Levels are meant to descend one step at a time: jumping from H2 straight to H4 leaves a gap in the outline, even though it looks identical once CSS is applied. An early version of HTML5 proposed an outline algorithm that would infer levels from sectioning elements, but no browser or assistive technology ever implemented it, and it was removed from the specification in 2022 — so the numbers you write are the structure you get. Headings are semantic HTML, not typography; text made large and bold with CSS is not a heading to anything that reads the markup.
Why It Matters
A screen reader user can pull up a list of every heading on a page and jump straight to the section they want, and WebAIM's recurring survey of screen reader users has found for years that most respondents navigate long pages that way before anything else. Strip the headings out and that shortcut disappears, leaving them to arrow through the whole document. Search engines lean on the same outline to work out which part of a page answers which question. A 4,000-word guide with one heading is one undifferentiated block; the same guide with eight accurate H2 elements is eight answerable sections.
How It Works
The parser builds a flat list of headings in source order — position on screen is irrelevant, only document order counts. Assistive technology exposes that list, with each entry's level, through the browser's accessibility tree. Search engines treat the heading above a passage as a strong hint about the passage's topic, which is why the text lifted into a featured snippet so often sits directly under a heading that matches the query. Because CSS is invisible to all of this, styling an H3 to look like a page title changes nothing structurally. If you need a big line of text that is not a section start, use a paragraph or a div and style it, rather than borrowing a heading level for its appearance.
Real-World Example
Someone publishes a 12-page onboarding handbook as a static page at northgate-handbook.99helpers.site, written in a word processor and exported to HTML. Every section title comes out as a styled paragraph, so the page has exactly one heading: the H1. Rewriting the export so each section starts with an H2 and each policy under it with an H3 turns a flat wall into a navigable outline, and Google starts showing individual section links under the main result.
Common Mistakes
- ✕Choosing a heading level for how big it looks — size is a CSS decision, level is a structural one, and mixing them up breaks the outline for everyone who cannot see it
- ✕Skipping from H2 to H4 because the H3 style is unattractive — restyle the H3 instead, since the gap tells screen readers a section is missing
- ✕Wrapping the site logo in an H1 on every page — each page then claims the same title, and the actual subject of the page is demoted
- ✕Using headings as decorative pull quotes or call-outs — they turn up in the heading list as sections that do not exist
Related Terms
Title Tag
The title tag is the HTML element that gives a page its name. Search engines usually show it as the clickable headline in a result, and the browser prints it on the tab.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Document Outline
A document outline is the nested hierarchy a page's headings describe — its table of contents, implied rather than printed. Assistive technology builds navigation directly from it.
Featured Snippet
A featured snippet is the boxed answer shown above the first ordinary result, lifted word for word from a page the search engine has already indexed.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →