Skip to content

Day 2 - Heading structure

Now that someone has reached your site they are presented with a mass of information. Regardless of the design of your page, information should be organized in a cascading association of headings that describe the information below each.

Heading structure

I like to imagine the heading structure of a page as if you were to take away all the content of the page and only see the headings. Would a first-time visitor be able to understand what the page is about with the heading structure and labels alone? Are the labels descriptive enough to allow visitors to pick where they can find information without any other context?

In general, a page should only have a single heading level 1, we won’t debate absolutes here, but the goal would be to have as few H1s as possible with all content cascading from the top (most important) heading on the page.

A few general rules that can easily start to drift, even from the most well-meaning content team:

  • There should be at least one H1 on each page
  • Heading levels should not be skipped when nested
  • Headings should describe the content below it

Task

  1. Install one of the two extensions below in your browser
  2. Open a page on your site and use the browser extensions below to view the heading structure
  3. Make any adjustments to the levels or labels if there are skipped

Example

Screenshot of a headings map result that shows H1s to H3s

Screenshot of a headings map for a web page

There are a few things to notice about the example above. The first is the multiple H1 tags, I’ll let you decide if that is something worth fixing. The second is the H2s at the bottom of the listing, they seem to be unnested but look like they are described by the “Become a Warrior” heading.

Tools

Further resources