HTML Headings: h1 to h6, Heading Levels and Page Outline

Headings give a page its outline, like the chapter and section titles in a book. HTML has six levels, from <h1> (most important) to <h6> (least important).

The six levels#

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

Browsers show higher levels larger and bold by default. With CSS you can make any heading look however you like, so choose the level for its meaning, not its size.

Headings form an outline#

Think of the levels as nesting: an <h2> is a section of the <h1> topic, an <h3> is a subsection of the <h2> above it, and so on.

<h1>Learn to Cook Rice</h1>
<p>A simple guide for beginners.</p>

<h2>Ingredients</h2>
<p>Rice, water and a pinch of salt.</p>

<h2>Method</h2>
<h3>Washing the rice</h3>
<p>Rinse until the water runs clear.</p>
<h3>Cooking</h3>
<p>Use two cups of water for every cup of rice.</p>

The outline of that page is:

Learn to Cook Rice
├── Ingredients
└── Method
    ├── Washing the rice
    └── Cooking

Why the levels matter#

• Screen reader users often jump from heading to heading to scan a page, just as sighted users skim. A clear outline makes a page fast to navigate without seeing it.
• Search engines use headings to understand what a page and each section are about.
• Everyone reads long pages more easily when they are broken into well-labelled sections.

Rules of thumb#

1. Use one <h1> per page for its main title. (HTML allows more, but one clear main heading is the widely recommended practice.)
2. Do not skip levels going down. After an <h2>, the next deeper level is <h3>, not <h4>. Going back up (from <h3> to <h2>) is fine.
3. Do not use headings just to make text big or bold. Use CSS for size and <strong> for importance.
4. Do not use bold paragraphs as fake headings. <p><b>Ingredients</b></p> looks like a heading but is invisible in the outline.

Common mistakes#

Practice#

<h1>Hyderabad</h1>

<h2>Places to Visit</h2>
<h3>Charminar</h3>
<p>A monument with four minarets built in 1591.</p>
<h3>Golconda Fort</h3>
<p>A fort known for its acoustics and city views.</p>

<h2>Food</h2>
<p>The city is famous for biryani.</p>

Key takeaway#