HTML Headings

Understand the topic

Headings organize a document into a hierarchy. h1 identifies the main subject, h2 introduces major sections, and h3 introduces subsections inside them. Screen reader users often navigate by heading, so the sequence should reflect relationships in the content. A practical convention is one clear h1 per page, followed by section headings at appropriate levels.

Worked example

<h1>Learn to cook</h1>
<h2>Breakfast</h2>
<h3>Porridge</h3>
<p>Prepare your ingredients.</p>
<h2>Lunch</h2>

Porridge is a subsection of Breakfast. Lunch is another main section, so it returns to h2. Font size can change with CSS without changing this outline.

Practice

Outline a page about transport with sections for buses and trains, and a subsection for bus fares.

<h1>Local transport</h1>
<h2>Buses</h2>
<h3>Bus fares</h3>
<h2>Trains</h2>

Common mistake

Do not select h4 just because its default size looks right. Pick the heading level first and style it afterwards.

HTML documentation