h1 Headings in Web Pages

Every page must start with a level 1 heading (aka heading 1, or h1).

Use different levels of headings to organize your pages. Think of a heading as the start of a section. The whole page counts as a section unto itself, so it starts with a heading 1. If you need to subdivide the page into sections, start each one with a level 2 heading. If you need to divide those again, use a heading 3, etc.

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 6

Only six levels of heading are available. If you need more layers than this, try reorganizing the content.

Headings should not be used as subheadings. The following is an example of incorrect usage:

h3 Main Heading

h4 Subheading

Use of the <small> tag is an appropriate way to communicate a subheading:

Main Heading
Subheading

<h3>
  Main Heading
  <br />
  <small>
    Subheading
  </small>
</h3>

Heading Bar

.heading-bar is a special class which can be applied to headings. It should be used to break up repetitive visual content or in special circumstances.

<h3 class='heading-bar'>Heading Bar</h3>