Home › HTML Masterclass › Headings and Text
Module 2: Headings0 Level Beginner

4. All 6 Headings from H1 to H6 (Headings H1-H6)

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - the exact meaning and level of each

Real-life analogy

Think of a whole book: the book's title is H1, a Chapter is H2, the main topic of a chapter is H3, a sub-point within a topic is H4, a side note or hint is H5, and the footnote at the very bottom is H6!

Explanation

HTML has exactly 6 levels of headings. They are used not just to make text look bigger but to define the page's outline (Hierarchy):

1. <h1> (Most important heading - Default 32px / 2em) The main heading of the page. There should be only one H1 on the whole web page (the golden rule of SEO).
2. <h2> (Major section heading - Default 24px / 1.5em) For the main chapters or large sections of the page (for example "About Us", "Our Services").
3. <h3> (Sub-heading / sub-topic - Default 18.7px / 1.17em) For dividing separate topics within an H2 section.
4. <h4> (Micro-topic / card title - Default 16px / 1em) For the titles of small boxes (Cards) or sidebar widgets shown on a website.
5. <h5> (Minor heading - Default 13.3px / 0.83em) A very small heading, such as the group name for a column of a table.
6. <h6> (Smallest heading - Default 10.7px / 0.67em) The smallest heading in HTML, for things like Terms and Conditions or footnotes.

Golden rules

  • Never skip levels: don't jump straight from H1 to H3 or H4. Always follow the logical order H1 -> H2 -> H3.
  • Don't use H1 or H2 just to make the font size bigger; use the CSS 'font-size' property to change font size.

Common mistake

Putting H1 five times on the same page. This confuses Google's search bot and lowers the website's SEO ranking.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 15px;">
  <h1 style="color: #b91c1c; margin: 4px 0;">H1: The Complete Guide to Web Development</h1>
  <h2 style="color: #c2410c; margin: 4px 0;">H2: Chapter 1 - Front-End Technologies</h2>
  <h3 style="color: #b45309; margin: 4px 0;">H3: 1.1 The Basics of HTML5</h3>
  <h4 style="color: #1d4ed8; margin: 4px 0;">H4: Introduction to Tags and Elements</h4>
  <h5 style="color: #4338ca; margin: 4px 0;">H5: Special Hint for Students</h5>
  <h6 style="color: #475569; margin: 4px 0;">H6: Copyright 2026 - All Rights Reserved</h6>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which heading is most appropriate for showing a book's 'Chapter Title' on a web page?

  1. <h1>
  2. <h2>
  3. <h5>
  4. <h6>
Show answer

Answer: <h2>

The main title of the page is <h1>, while <h2> is used for the chapters/sections within it.

← All 38 lessons