Heading elements - HTML

Demo

Summary

To create headings in HTML, use the h1, h2, h3, h4, h5, and h6 elements:

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

To see what these elements looks like in the browser, view the Demo section below.

Details

Heading elements allow you to create titles for the various sections on your web page and help give your web page structure.

By default, the h1 element is rendered as the largest heading, and h6 is rendered as the smallest heading (you can change their size using CSS, however).

Generally speaking, you only want one h1 element per page. It should be your main heading for the page.

After the h1, each major section on your page can start with an h2 element. If these sections need to be divided into subsections, the subsections can start with h3 elements. This pattern continues until you reach h6.

Things to avoid

Don’t use the heading elements based on their size or the way they look.

When you start using heading elements, start with an h1 tag, since that’s your main heading for the page. Don’t skip to the h2 tag or any of the lower heading tags. In other words, avoid this:

<body>
  <h2>Main Title</h2>
</body>

Similarly, don’t use the heading tags out of order. Avoid this:

<body>
  <h6>Main Title</h6>

  <h3>Subheading 1</h3>
  <p>Sample paragraph.</p>

  <h2>Subheading 2</h2>
  <h6>Section title</h6>
  <p>Section paragraph.</p>
  
  <h4>Subheading 3</h4>
  <p>Sample paragraph.</p>
</body>

In the example above, the code starts with an h6, then jumps back to an h3, then an h2, and uses other headings later. Instead, do this:

<body>
  <h1>Main Title</h1>

  <h2>Subheading 1</h2>
  <p>Sample paragraph.</p>

  <h2>Subheading 2</h2>
  <p>Sample paragraph.</p>
  <h3>Section title</h3>
  <p>Section paragraph.</p>

  <h2>Subheading 3</h2>
  <p>Sample paragraph.</p>
</body>

When used properly, the headings essentially form an outline of the document, which is especially useful for people using screen reader software. The example above forms the following outline:

Main Title
- Subheading 1
- Subheading 2
  - Section title
- Subheading 3

Exercises

Recreate the embedded CodePen demo by typing out the HTML code in your index.html file. Then, try customizing the text in the heading elements. Experiment with using different lengths of text.

References

The Heading elements on MDN

Lesson tags: Open Lesson

Heading elements – HTML