HTML Headings

Headings are the titles and subtitles of a page. HTML gives you six levels, from h1 down to h6, and together they work like an outline. The h1 states the main topic, and h2 through h6 split the content into smaller and smaller sections. Readers scan headings first, so a clear outline makes a page feel organized.

Headings matter beyond looks. Screen readers let blind users jump from heading to heading, and search engines treat heading text as a strong clue about what a page covers. That is why the words inside your headings should match what the section actually talks about.

Do not pick a heading level by size. If you want smaller text, use CSS. Jumping from h1 straight to h4 confuses everyone, because it breaks the outline the levels are supposed to create. Move down one level at a time as your content gets more specific.

The one-h1 rule

A well-built page has exactly one h1 for the main topic. Every other heading sits under it in order: h2 for major sections, h3 only under an h2, and so on. You can use several h2 tags, but each should cover a distinct part of the topic. More than one h1 splits the outline and weakens the page for search engines.

<h1>Main topic</h1>
<h2>First section</h2>
<h3>A smaller part</h3>
<h2>Second section</h2>

Sizes are just defaults

The browser gives each level a default size, with h1 largest and h6 smallest. Those defaults are only starting points. Designers regularly restyle heading sizes with CSS, and that is fine. What matters is the order and the meaning, not the exact pixel size.

Syntax

<h1>Biggest heading</h1>
<h2>Section heading</h2>
<h3>Subsection heading</h3>
<h6>Smallest heading</h6>

<!-- BAD --><h1>Title</h1><h3>Section</h3>
<!-- GOOD --><h1>Title</h1><h2>Section</h2>