A heading is a word or short phrase that names the text immediately below it. Think of headings as signposts: a main heading names the whole page, while smaller headings guide readers through sections and subsections. Together, they create a quick outline of the page’s structure. section 2.19 section 1.3
In HTML, choose a heading level by its place in the page hierarchy:
- Use <h1> for the highest-level heading, usually the page’s main title. section 2.19
- Use <h2> for sections under that title, then <h3> for subsections; continue through <h6> for lower levels. section 2.19
- Remember that a visible <h1> is different from the <title> text in the head: the heading appears on the page, while the title appears in the browser tab. section 2.19
A tiny page outline
<h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> Browsers place each heading in its own block and normally make headings bold. Higher levels display larger than lower levels, so the structure is easy to spot at a glance. section 2.19 section 2.20
Heading tags provide structure; CSS controls their appearance. A rule such as h1 { color: purple; } styles every h1 on the page, keeping repeated main headings consistent. CSS can also set font size, and one change updates all matching headings. section 1.19 section 4.27
<h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h4>Level 4 Heading</h4> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6>
Compare all six heading elements side by side to see the available levels and their default size progression. section 2.20
