Module 2: Text · Lesson 1 of 8
HTML Headings h1 to h6: How to Use Heading Tags
All lessons in Module 2
Goal: Give a page an outline with the heading levels h1 to h6.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
HTML has six heading levels (opens in a new tab), <h1> to <h6>. They work like the outline of a book: h1 is the book title, h2 elements are chapters, h3 elements are sections inside a chapter, and so on.
Three rules keep the outline clean:
- Use one
h1per page, for its main topic. - Don't skip levels on the way down. An
h3goes under anh2; putting it straight under theh1leaves a gap. - Choose a level for what it means. Headings are semantic: they say what the text is. Making text small is a job for CSS later.
People who use a screen reader often jump from heading to heading to scan a page, the way you skim the headlines in a newspaper. That only works with a clean outline. The accessibility module comes back to it in Heading Order.
The short version
- HTML has six heading levels,
<h1>(most important) to<h6>(least important). - Use one
<h1>for the main topic,<h2>for chapters and<h3>for sections inside them. - Don't skip levels on the way down. Jumping back up, from
<h3>to a new<h2>, is fine. - Pick a heading level by its place in the outline. Size is CSS's business.
Example
<h1>Pet Care Guide</h1>
<h2>Dogs</h2>
<h3>Feeding</h3>
<p>Two meals a day.</p>
<h3>Walking</h3>
<p>At least one walk every day.</p>
<h2>Cats</h2>
<h3>Feeding</h3>
<p>Small meals, often.</p>Your task
This holiday guide uses plain paragraphs where it needs headings. Give it an outline:
- Turn
MarsandJupiterinto<h2>headings. - Turn the three section lines (
Where to stay,What to pack,Where to stay) into<h3>headings. - Keep the tip as a normal paragraph, and use no heading below
h3.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p><strong>Feeding</strong></p>
<p>Two meals a day.</p>Right
<h3>Feeding</h3>
<p>Two meals a day.</p>Bold text only looks like a heading. Screen readers and search engines leave it out of the outline.
Wrong
<h5>Free shipping on all orders!</h5>Right
<p><strong>Free shipping on all orders!</strong></p>A heading introduces a section. An important sentence with nothing under it goes in a paragraph, with strong.
Go deeper
Browsers give each level a default size: an <h1> is twice the normal text size, while <h5> and <h6> come out smaller than a paragraph. So beginners are tempted to pick levels by looks. Don't. CSS can give any level any size.
Headings are the main way screen reader users find their way around. In popular screen readers, pressing H jumps to the next heading and the number keys 1 to 6 jump to a specific level. WebAIM's screen reader user surveys keep finding that most people scan a page by its headings first. The WCAG guidelines list real heading markup under Info and Relationships (opens in a new tab) for that reason.
Old advice says every <section> can start again with its own <h1> and the browser will work out the real levels. No browser ever implemented that outline algorithm, and it was removed from the HTML standard in 2022. Use the level that matches the real depth.
Try reading only your headings, top to bottom. If they work as a table of contents for the page, your outline is right.
Frequently asked questions
How many h1 tags should a page have?
One. HTML doesn't forbid several, and search engines cope with more than one, but a single <h1> makes the main topic of the page obvious to human readers, screen readers and search engines alike. It usually matches or closely mirrors the page <title>, which you will write in Title and Charset.
Can I skip heading levels in HTML?
Not on the way down. An <h4> straight after an <h2> suggests a missing section and confuses screen reader users. Going back up is normal, though. After an <h4> you can start a new chapter with an <h2>. If a level looks too big or small, change its size with CSS instead.
Do headings help SEO?
Yes, if you write them for people. Search engines read headings to understand what a page and each of its sections are about, and a clear outline can earn "jump to" links in results. Write headings that describe the section honestly, as Google's SEO Starter Guide (opens in a new tab) recommends. Stuffing keywords into them, or wrapping whole paragraphs in heading tags, won't help. It only makes the page harder to read.
