iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Headings

By · Reviewed & last updated · Part of HTML Tutorial

HTML offers six levels of heading: <h1> through <h6>. <h1> is the most important; <h6> is the least.

The heading hierarchy

h1 — Page title h2 — Section h3 — Subsection h4 — Sub-subsection h5 — Lower level h6 — Lowest level Default browser sizes shown above. CSS can change the look, but the hierarchy stays the same.
Fig 1. Heading levels at their default browser sizes.

Why hierarchy matters

  • Accessibility: screen readers let users jump between headings to scan a page.
  • SEO: search engines weight headings — especially <h1> — to understand what a page is about.
  • Maintenance: a clear outline makes long pages much easier to edit.
Note: Pick heading levels for meaning, not size. If you want a smaller heading, use the right level and shrink it with CSS — don't jump from <h1> straight to <h4> for visual reasons.
Tip: Use exactly one <h1> per page (typically the page title), then nest <h2>–<h6> beneath it.

Example

Example
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
Try it Yourself »

Exercise

Use the most important heading level for the page title.

< >Welcome</ >

Test yourself

Q1. How many levels of heading does HTML offer?
Q2. Which heading is most important for SEO?
Q3. Which is the best reason to pick a heading level?

Discussion

Loading…