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.
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.
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.
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.