Headings give your page structure. They tell browsers, search engines, and screen readers how your content is organised — not just how it looks.
HTML has six heading tags, <h1> through <h6>. <h1> is the largest and most important; <h6> is the smallest. Each renders at a different default size and weight.
<h1>Page title</h1>
<h2>Major section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>
In practice, most pages only use
<h1>,<h2>, and<h3>. You rarely need to go deeper than that.
The <h1> is the top-level title of the page — there should only be one. Think of it like the title on the cover of a book. Every other section uses <h2> or lower.
<h1>My cooking blog</h1>
<h2>Breakfast recipes</h2>
<p>Start your day right with these ideas.</p>
<h2>Dinner recipes</h2>
<p>Simple meals for weeknight cooking.</p>
Common mistake: using multiple
<h1>tags because they look big. If you need big text, use CSS — don’t misuse heading levels.
Headings should nest in order. Don’t jump from <h2> straight to <h4> — it confuses assistive technology and hurts SEO.
<!-- Correct: levels nest in order -->
<h2>Breakfast</h2>
<h3>Eggs</h3>
<h3>Pancakes</h3>
<!-- Wrong: skipping h3 entirely -->
<h2>Breakfast</h2>
<h4>Eggs</h4>
It’s tempting to pick a heading level based on how big you want the text to look. Resist that. Heading levels carry semantic meaning — they describe the document outline, not the visual design. Use CSS to control size.
<!-- Wrong: using h3 just because it "looks right" -->
<h3>Contact us</h3>
<h3>Privacy policy</h3>
<h3>Terms of service</h3>
<!-- Right: all are top-level links, so h2 is correct -->
<h2>Contact us</h2>
<h2>Privacy policy</h2>
<h2>Terms of service</h2>
Add this to your index.html and inspect how the browser renders each level:
<body>
<h1>My first structured page</h1>
<h2>About me</h2>
<p>A short paragraph about who you are.</p>
<h2>My hobbies</h2>
<h3>Reading</h3>
<p>Books I enjoy.</p>
<h3>Coding</h3>
<p>Projects I'm working on.</p>
</body>
Notice how the page now has a clear visual hierarchy — and if you opened it in a screen reader, it would announce each heading level as you navigate.
| Tag | Role |
|---|---|
<h1> | Page title — one per page |
<h2> | Major section |
<h3> | Subsection within an h2 |
<h4>–<h6> | Deeper nesting — use rarely |