Headings: h1–h6
Learn the six heading levels and the rules of heading hierarchy.
What is a heading?
A heading is a short text that introduces a page or a section. HTML offers six heading levels: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
<h1> is the largest, <h6> is the smallest. The browser sets the font size automatically based on the level. Their real job is not visual but to describe the page structure.
Heading hierarchy
Headings form a hierarchy: <h1> is the main title, <h2> its sub-sections, <h3> the sub-sections of <h2>. Each level is a child of the one above.
Splitting content into logical sections makes it easier to scan. This structure guides not only the eye but also search engines and screen readers.
Rules of a good hierarchy
A good heading hierarchy has two main rules. First: usually a page has only one <h1>; that is the main title. Second: do not skip levels — going from <h1> to <h3> is wrong; use <h2> first.
These rules are not strict, but consistency makes the page more readable and more accessible.
Exercise Write blog post headings
Add a blog post heading hierarchy to body: one <h1> (for example Garden Blog), followed by two <h2> sub-sections (Spring and Summer).
Show example solution
<body>
<h1>Garden Blog</h1>
<h2>Spring</h2>
<h2>Summer</h2>
</body>Test yourself
-
How many heading levels does HTML offer?
- Three
- Four
- Six
- Ten
Show answer
Six — Correct. HTML offers six heading levels: h1 through h6.
-
Match each tag to its role
- <h1>
- Main title
- <h2>
- Section title
- <h6>
- Smallest sub-heading
- <p>
- Paragraph
-
Close the heading
<h1>Page Title____Show answer
<h1>Page Title</h1>