How to Use h1–h6 — Show the Order of Headings

HTML's h1 through h6 elements mark headings. They show which topics are large and which smaller topics belong inside them.

The answer first

A small example

<h1>How to Make Bread</h1>

<h2>Ingredients</h2>
<h3>Measure the flour</h3>
<h3>Measure the water</h3>

<h2>Steps</h2>
<h3>Knead the dough</h3>

The h1 names the page topic. The h2 elements start its main topics, and h3 starts a smaller topic inside them.

The number shows the order

h1 is the top level. A larger number means a smaller topic. For example, use h3 for a topic inside an h2 topic.

You can return to h2 when a new main topic begins, even if the previous heading was h4. Choose levels by how the ideas fit together.

Heading level and text size are different

Browsers often show headings in larger, bold text. That appearance does not set the meaning. Do not use h4 just because you want smaller text; use CSS to change its appearance.

Adding section does not change the number

Wrapping content in section does not automatically change a heading's number. Choose the level for the whole page. See How to Use the section Element for more.

Headings also help people move around

Correct heading elements let screen readers and other tools show a list of headings or move from one heading to another. Text made large only with styling does not have that heading meaning.

Common mistakes

• Using h1 or h2 only to make text bigger
• Skipping levels without checking how the topics fit together
• Expecting section to change a heading's number
• Using heading text that does not tell readers what follows

Try reading just the headings in order. They should still show the page's main ideas.

Check the standard and browser evidence in Atlas

See HTML headings in Yugien Atlas for the exact definitions, level calculation, accessibility-tree exposure, and WPT results.