Heading Tags and Content Structure

One of the most important HTML elements are H1-H6 (heading) tags.

HTML includes six heading tags, H1-H6, which can be used to organize your page into topics and sub-topics. The numbers on the tags relate to the level, or indentation, the heading would have if you made an outline of the document.

• Heading 1 (H1) is already used by the page title. Please do not use H1
  • Heading 2 breaks your page into significant topics
    • Heading 3 allows you to have an aside within a significant topic
    • Heading 3 will also allow you to further divide a large topic into several sub-topics
  • Heading 2 after Heading 3 is essentially out-denting: It means that you’re moving on to the next significant topic

For example, you may wish to set up the content structure of your Resources page as follows:

• Heading 1 Resources (This is your page title.)
  • Heading 2 Resources for Students
    • Heading 3 Guides for Students
    • Heading 3 Policies for Students
    • Heading 3 Websites for Students
  • Heading 2 Resources for Parents
    • Heading 3 Guides for Parents
    • Heading 3 Websites for Parents
  • Heading 2 Resources for Faculty
    • Heading 3 Guides for Faculty
    • Heading 3 Policies for Faculty
    • Heading 3 Websites for Faculty

For the most part, you should only ever need to use H2 and H3. If you find yourself relying on H4 – H6, that’s often a good sign that your page is trying to cover too many topics at once and that it might be best to break it into multiple pages.

Heading Tag Tips

Heading tags are about conveying the document structure, not about creating a look. You should never use H3 instead of H2 because you feel that H3 looks better.

Don’t worry about page length – users are comfortable with long pages that require scrolling. Instead, ensure that the page has a clear topic, that it stays on topic throughout, and that the structure of the document is easy to understand using the heading tags.

Also, be mindful that, although you can out-dent multiple levels at once (i.e. from H4 to H2), you should never indent more than one level at a time.

Heading Tags and Accessibility

Using heading tags appropriately is an important part of providing a high-quality experience for visitors who use screen readers or users with motor impairments who navigate using page landmarks. Many accessibility tools will actually create a table of contents for the user based on the heading structure which allows them to jump directly to the content they want to read.

To make your website content more accessible, when using heading tags:

1. Ensure that each heading accurately describes the content below it.
2. Each topic on your page should be covered by a heading.
3. Try to write your content with the understanding that readers may jump straight to the topic (i.e. don’t assume they read all of the content above it).