HTML Headings

What headings are

Headings are titles and subtitles inside a document.

HTML has six heading elements: h1, h2, h3, h4, h5 and h6. They are not just large text. They describe the hierarchy of the content. A heading tells the reader: this is the subject of the next piece of content.

Think of a page as a book chapter. The h1 is the title of the chapter. The h2 headings are the main sections. The h3 headings are subsections inside an h2. You can go deeper with h4, h5 and h6, but most pages only need the first three levels.

<h1>Main page subject</h1>
<h2>Large section</h2>
<h3>Subsection inside that section</h3>

Heading levels

Each heading level has a place in the hierarchy.

The number in the heading tag is not a design size. It is a structure level. h1 is the highest level and h6 is the deepest level. Browsers give headings default margins and font sizes, but those default styles are not the reason to choose a heading level.

Page outline

A good heading structure can be read like a table of contents.

Before you read every paragraph, scan only the headings. If the headings alone explain the structure of the page, the outline is doing its job. If the headings feel random, repeated or out of order, the page will feel confusing as well.

<h1>Learn HTML</h1>

<h2>HTML basics</h2>
<h3>Elements</h3>
<h3>Attributes</h3>

<h2>HTML layout</h2>
<h3>Header and navigation</h3>

Good versus weak

Move down one level at a time.

A clean page normally starts with h1. After that, use h2 for main sections. If a section needs smaller parts, use h3. Do not jump from h1 to h4 because the default style happens to look nice.

<h1>Product page</h1>
<h2>Features</h2>
<h3>Performance</h3>
<h3>Security</h3>
<h2>Pricing</h2>

<h1>Product page</h1>
<h4>Features</h4>
<h2>Performance</h2>
<h5>Security</h5>

SEO and accessibility

Headings help search engines and assistive technology understand the page.

Search engines use headings as one signal for structure and topic. A clear h1 should match the main subject of the page, and useful h2 headings should divide the page into real sections. Do not stuff headings with repeated keywords. Write for humans first.

Screen reader users can jump from heading to heading. That makes headings navigation points, not decoration. If someone hears only your headings in order, the page should still make sense.

CSS versus HTML

HTML chooses meaning. CSS chooses appearance.

It is fine for an h2 to look small or for an h3 to look visually strong. The tag should follow the content hierarchy. Visual size, spacing, weight and color belong in CSS.

<h2 class="small-section-title">Related lessons</h2>

<style>
.small-section-title {
  font-size: 18px;
  text-transform: uppercase;
}
</style>

Live code lab

Change the headings and watch the page structure change.

Edit the heading levels in the HTML panel. Keep the structure logical: one h1, then h2 sections, then h3 subsections.

Checklist

Use this checklist before publishing a page.