Headings: h1 Through h6

~7 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

You already know <h1>. But there are six different heading sizes in total: <h1> through <h6>. The number represents importance: h1 is the most important (and biggest) heading, h6 is the least important (and smallest).

All six sizes compared

<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

If you paste this into your index.html (try it!), you'll see: each level automatically shows up a bit smaller. The browser does this entirely on its own, without us needing any CSS.

The most important rule about headings

Many beginners think you pick the heading level based on how big you want the text to look. That's a mistake! The correct rule is: heading levels describe your page's structure, not its appearance.

A page normally has exactly one <h1>: the main heading of the whole page.
<h2> are the big sections underneath (like chapter headings in a book).
<h3> are subsections within an h2 section.
This continues, nested, all the way to <h6> - which is rarely needed in practice.

Picture the table of contents of a book: the book itself has a title (h1). Each chapter has a heading (h2). If a chapter has subsections, those get h3. You build a website using exactly the same pattern.

Achtung: NEVER pick a heading level just because it "looks nicely big" or "nicely small". How a heading looks (size, colour, font) is later the job of CSS. In HTML it's only about meaning: "how important is this text compared to the rest of the page?"

Giving our website a structure

Let's give Finn's website a real structure now:

index.html

<body>

  <h1>Finn's Football Website</h1>

  <h2>About Me</h2>

  <h2>My Favourite Players</h2>

  <h2>My Team</h2>
  <h3>Training Times</h3>
  <h3>Our Achievements</h3>

</body>

Save and look at it in your browser. You already see a rough skeleton of your website - still without real text underneath, but with a clear, sensible structure. We'll fill that text in with real paragraphs in the next chapter.

Vorheriges Kapitel HTML Comments: Notes Nobody Sees Nächstes Kapitel Paragraphs With <p>