6. HTML Headings

What you will learn

• The six heading levels
• Why headings are about structure, not size
• Good heading practice for people and search engines

The six heading levels

HTML has six heading elements, from <h1> (most important) to <h6> (least important).

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

By default, browsers show <h1> as the biggest and <h6> as the smallest.

Headings describe structure

Think of headings as the outline of a document. The <h1> is the title. The <h2> elements are the main sections. An <h3> is a subsection inside an <h2>, and so on.

<h1>Healthy Eating</h1>
  <h2>Fruit</h2>
    <h3>Apples</h3>
    <h3>Oranges</h3>
  <h2>Vegetables</h2>

Why headings matter

• Screen reader users jump between headings to scan a page.
• Search engines use headings to understand what a page is about.
• Every reader finds long pages easier to scan.

Good practice

• Use one <h1> per page, describing the main topic.
• Do not skip levels. Go from <h2> to <h3>, not <h2> to <h5>.
• Do not choose a heading level just because of its size. Change size with CSS instead.
• Do not use headings to make ordinary text bold.

Common mistakes

• Using several <h1> elements for visual effect.
• Skipping heading levels.
• Using a heading when you only want large or bold text.
• Forgetting the closing tag, such as <h2>Title</h3>.

<h1>My Hobbies</h1>
<h2>Music</h2>
<h2>Sports</h2>

Summary

• Headings run from <h1> to <h6>.
• They build the outline of your page.
• Use one <h1>, do not skip levels, and style with CSS.

Next lesson: HTML Paragraphs.