Free HTML tutorial

HTML Headings: Structure Content with h1 to h6

HTML heading elements label the sections of a page. Learn how to choose a heading level that describes the content hierarchy and helps readers scan the page.

Quick answer: Use <h1> for the page’s main heading, <h2> for its major sections, and lower levels for nested sections. Choose heading levels for structure; use CSS to control their appearance.

Use headings to organize content

HTML provides six heading levels. <h1> is the highest level and <h6> is the lowest. A logical sequence helps a reader understand how ideas relate to each other.

<h1>Gardening basics</h1>
  <h2>Choosing a location</h2>
  <h2>Preparing the soil</h2>
    <h3>Testing drainage</h3>

The two <h2> headings introduce sections at the same level. The <h3> heading is a subsection of “Preparing the soil.”

Keep the content outline understandable

Use headings for section titles, not simply to make text look large or bold. A page should have a clear main heading, and section headings should describe the content that follows them.

Do not skip levels when doing so would confuse the hierarchy. For example, a subsection of an <h2> section is normally an <h3>. If you want a heading to look smaller or larger, keep its semantic level and adjust its font size with CSS.

Why heading structure helps

Descriptive headings make a long page easier to scan. Assistive technologies can also expose headings as navigation points, so a meaningful sequence helps people move between sections.

Headings should describe the page content accurately. They can help search systems understand the organization of a page, but adding extra headings or repeating keywords does not guarantee better rankings.

HTML heading questions

Should a page have one <h1>?

A single, clear <h1> for the main page topic is a useful default. Then organize the content beneath it with section headings that reflect the page outline.

Can I choose a heading level based on its font size?

Choose the level based on the content hierarchy. Use CSS to change the font size and visual style so the structure remains meaningful.

Practice: outline a short article

Write one <h1> for the article, add two or three <h2> section headings, and use <h3> only for a subsection of one of those sections. Read the headings by themselves and check that they still describe the article’s flow.

Read MDN’s heading elements reference for the six heading levels and their usage notes.

Open the heading example (opens in a new tab)