Headings

HTML has six heading levels — <h1> through <h6>. They form the page’s outline, the way chapter and section headings do in a book.

The Hierarchy

<h1>Recipe for Pancakes</h1>

<h2>Ingredients</h2>
<p>...</p>

<h2>Instructions</h2>

<h3>Prepare the Batter</h3>
<p>...</p>

<h3>Cook the Pancakes</h3>
<p>...</p>

• <h1> — the page’s main heading. Use exactly one per page.
• <h2> — major sections
• <h3> — subsections, and so on down to <h6>

Don’t Skip Levels

Bad:

<h1>Title</h1>
<h3>Section A</h3>     <!-- skipped <h2> -->

Good:

<h1>Title</h1>
<h2>Section A</h2>
<h3>Subsection</h3>

Skipping levels confuses screen readers and tools that build a page outline. If you want a smaller-looking heading, change the CSS — not the tag.

Why Headings Matter Beyond Looks

• Screen readers can list every heading; users navigate that list to jump around the page
• Search engines weight headings as content signals
• Outline — a well-structured doc has a sensible outline that reflects the content’s structure

Picking a Level

Look at the logical structure, not the visual one:

• “What’s the page’s main topic?” → that’s the <h1>
• “What are the page’s major sections?” → those are <h2>s
• “Within each section, are there labeled subsections?” → <h3>s

If you find yourself wanting a tiny heading for visual emphasis, you probably want a <p> with a class — not an <h6>.

Up Next

Paragraphs and the inline formatting tags.