HTML Headings

Headings are the signboards of a web page. Before reading anything closely, most visitors scan the headings to decide whether the page has what they want. Screen reader users and search engines do the same thing in their own way.

In this lesson you will learn the six heading levels, how to arrange them into a sensible outline, and why choosing a heading for its size is a mistake.

Six levels of headings

HTML has six heading elements, from <h1> (most important) to <h6> (least important). Browsers show higher levels in larger, bold text by default.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading levels</title>
</head>
<body>
  <h1>Heading level 1</h1>
  <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
  <h4>Heading level 4</h4>
  <h5>Heading level 5</h5>
  <h6>Heading level 6</h6>
</body>
</html>

In real pages you will mostly use <h1> to <h3>, sometimes <h4>. Levels 5 and 6 are rare, because a page that needs six levels of nesting is usually too long and should be split into several pages.

Headings make an outline

Think of a school textbook. The book has a title, each chapter has a title, and each chapter has smaller topics. Headings work exactly the same way. The level of a heading says where it sits in that outline, not how big it looks.

Here is the page for a college tech fest in Pune:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TechUtsav 2026 | College Tech Fest, Pune</title>
</head>
<body>
  <h1>TechUtsav 2026</h1>
  <p>Two days of contests, talks and food stalls on our Pune campus.</p>

  <h2>Events</h2>
  <h3>Coding contest</h3>
  <p>Solve five problems in three hours. Teams of two.</p>
  <h3>Robot race</h3>
  <p>Build a line-following robot and race it on our track.</p>

  <h2>Registration</h2>
  <p>Entry is ₹200 per team. Register at the help desk.</p>
</body>
</html>

Read only the headings and you get a clear outline of the page:

TechUtsav 2026
├── Events
│   ├── Coding contest
│   └── Robot race
└── Registration

The two <h3> headings are subtopics of "Events". "Registration" is back at level 2 because it is a new main topic, not part of "Events".

Rules for a good outline

Use one <h1> per page. The <h1> names the whole page, the way a title names a book. The HTML standard does not forbid more than one, but a single <h1> that matches the page's main topic is the clearest choice for readers and the common advice for search engines.

Do not skip levels on the way down. After an <h2>, the next lower level is <h3>, not <h4>. Skipping makes listeners using a screen reader wonder whether they missed a section.

Going back up is fine. You can jump from an <h4> straight back to an <h2> when a new main topic starts. That is just the end of a branch in the outline.

Every section starts with a heading. If a block of content has no heading, ask whether it really is its own section. If it is, give it one. You will see in Semantic HTML how headings and sectioning elements work together.

Why headings matter so much

• Readers skim. Clear headings let a busy visitor jump to "Registration" without reading the whole page.
• Screen reader users navigate by headings. Screen readers can list all headings on a page or jump from one to the next. For many blind users this is the main way to explore a page. A missing or wrong level makes the page much harder to use. Learn more in Accessibility Basics.
• Search engines read headings to understand what each part of a page is about. Good, descriptive headings help them match your page to the right searches. See HTML for SEO & Social Sharing.

Size is a CSS job

Browsers give headings a default size, but you are free to change it. If your design needs a small <h2>, keep the <h2> and make it smaller with CSS. Never choose <h4> just because it looks the right size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styling headings</title>
  <style>
    h1 { font-size: 1.6rem; color: #1d4ed8; }
    h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; color: #555; }
  </style>
</head>
<body>
  <h1>Kochi Weekend Food Walk</h1>
  <h2>Stops on the route</h2>
  <p>Fort Kochi, Jew Town and Mattancherry.</p>
</body>
</html>

The <h2> now looks small and quiet, but it is still a level 2 heading in the outline. You will learn these properties in Styling Text.

Subtitles and taglines

A tagline under a heading is not a lower-level heading, because no content sits under it. Write it as a normal paragraph. If you want to show that the two belong together, wrap them in <hgroup>:

<hgroup>
  <h1>Ananya's Kitchen</h1>
  <p>Home-style South Indian tiffin, delivered in Kochi</p>
</hgroup>

Common mistakes

• Choosing a level for its size. Pick the level from the outline, then style it with CSS.
• Fake headings. <p><strong>Our Services</strong></p> looks like a heading but is not one, so screen readers and search engines miss it. Use a real <h2>.
• Skipping levels. Going from <h2> straight to <h4> breaks the outline.
• Using headings for emphasis. A sentence that is merely important belongs in <strong>, not in a heading.
• Vague headings. "Section 2" or "More info" tells the reader nothing. Say what the section is about.

Key points

• HTML has six heading levels, <h1> to <h6>; most pages use only <h1> to <h3>.
• Heading levels build an outline of the page, like chapters and topics in a book.
• Use one <h1> for the page's main topic and do not skip levels on the way down.
• Screen reader users and search engines rely on headings to understand and move through a page.
• Change heading size with CSS, never by choosing a different level.
• Put taglines in a <p>, grouped with <hgroup> if you like.

<h3>Kabir Cricket Academy</h3>
<p><strong>Batches</strong></p>
<h5>Morning batch</h5>
<p>6 am to 8 am, ages 10 to 14.</p>
<h5>Evening batch</h5>
<p>4 pm to 6 pm, ages 15 to 18.</p>
<h1>Fees</h1>
<p>₹1,500 per month.</p>

<h1>Kabir Cricket Academy</h1>
<h2>Batches</h2>
<h3>Morning batch</h3>
<p>6 am to 8 am, ages 10 to 14.</p>
<h3>Evening batch</h3>
<p>4 pm to 6 pm, ages 15 to 18.</p>
<h2>Fees</h2>
<p>₹1,500 per month.</p>