HTML Headings
Six levels of heading give your page an outline — readers and machines both rely on it.
What each heading level means, the one-h1 rule, and why heading order is a contract with screen readers and search engines.
Prerequisites
A browser. Nothing else.
HTML has six heading elements, <h1> through <h6>. Think of them as the levels of a table of contents: h1 is the title of the page, h2 is a major section, h3 a sub-section, and so on down to h6.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>Try it yourself
Don’t skip levels
Go down one level at a time. Jumping from h2 straight to h4 breaks the outline that screen-reader users navigate by — and confuses search engines about how your content nests.
- One h1 per page.
- Descend one level at a time — never skip.
- Choose the level for meaning, not for how big the text looks.
Quiz
How many <h1> elements should a typical page have?
Reference
Go deeper: every attribute a heading carries
The Deep tab covers the DOM interface and every attribute h1–h6 accept.
More like this
HTML Headings
h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.
HTML Headings
Everything about h1–h6 you’d look up mid-task, with no preamble.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the team. We can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.