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>
```

Next lesson: Paragraphs

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies