A crash course in page hierarchy and heading tags

Content on your website is made for people, of course. But assigning the correct structure to the information (using the headings available for web content) ensure that people with disabilities are able to navigate effectively and provides detail for search engines, seeking out answers to all the questions they get. Here's an overview and some best practices on applying heading tags to your site's content.

Heading tags (<h1> - <h6>) help define a page’s content structure and document outline. They have a small effect on SEO and play a large role in ADA compliance.

Use headings whenever there is a new section or sub-section of content. This will allow visual users to skim over the entire document to find what they’re looking over. It also allows users with visual impairments to navigate through a page using assistive technologies.

Common errors with heading tags

The most common errors I see when using headings are:

Using the incorrect heading level

When using more than one heading on a page it is important to use the correct hierarchy. Using the incorrect hierarchy level can affect SEO and could make using assistive technology, such as a screenreader, very cumbersome. Be sure to never skip heading levels. For example, the heading after an <h2> should never be an <h4>, <h5>, or <h6> when starting a new section or sub-section of content.

Using headings to style text

This is often the #1 reason for using an incorrect heading level. While different heading levels can have a unique appearance, remember that heading tags are not there to make text look different. We have other ways of making any heading tag level look the same or different from any other.

Styling text to look like a heading but not using a heading tag

Rule of thumb: if it looks like a heading, it should be using a heading tag. While this might not affect visual users, it means assistive technologies will likely ignore this text when navigating through the document.

Heading tags in practice

Let’s look at an example page of the Portland Timber’s roster and some strengths and weaknesses at each position category.

Sample Timbers roster without a page heirarchy or tags applied

If you take that page and break it down into sections and sub-sections you’ll see that the headings (bolded text) make this relatively easy.

A sample Timbers roster organized into sections and subsections

If we go one step further and designate which headings designate sub-sections of previous headings, we now have a hierarchy and can establish which heading level to assign to each heading.

A sample Timbers roster with headings applied to designate sections and subsections.

Since the page title, Portland Timbers, is the top-level heading, it will use a level 1 heading element (<h1>). In this example, the different position categories will use a level 2 heading element (<h2>) since they are sub-sections of the page title. Then the Strengths and Weaknesses sections, being sub-sections of the position categories, will use a level 3 heading element (<h3>).

Note that there can only be one <h1> element per page. This means when creating content, you should never use the <h1> element since it is already on the page title.

So we've covered when and where. In WordPress, there are two ways to apply the appropriate header: inside a WYSIWYG editor (as part of a section block or in the main content area of a post) or in a section block's drop-down menu in the page builder. We'll go over the specifics of how to do so in another post.

Ready to Start a New Web Project?

Get Started