It’s not enough to have well-written content for your website. The formatting of content is important for accessibility compliance, readability, and search engine optimization (SEO). The most important tags a content writer or editor can use when formatting text are heading tags. When adding them to website content, there are important considerations to make to avoid accessibility or SEO issues.
First, let's review what the <h1> tag does. Simply put, it's a tag that tells search engines and website users what the main topic of a page is. This helps identify the top of the structure of the content, making it easier to read and understand.
Having every page contain a top-level heading is important for users that rely on screen readers to navigate and understand the content of a website. Screen readers will use the <h1> tag as a navigation point to let users jump to the main content portion of the web page. If that <h1> tag is missing or is located further down the page, it disrupts the user experience by inconveniencing the user in a way others are not.
Also, consider people with visual impairments cannot perceive the style differences on their screen. They determine the importance of text by having the screen reader notify them of any headings, which helps establish the hierarchy of the content.
Search engines use headings to determine the main topic and sub-topics of your content, and how they relate to each other. By using headings properly, you can signal the importance of certain ideas and phrases to increase your chances of ranking higher for targeted keywords.
When it comes to using headings, it's not just about using them, but using them in the right order. The heading tag hierarchy goes from <h1> to <h6>, with <h1> being the most significant and <h6> being the least. The first heading of a page should always be an <h1> tag. The following heading tags should descend in an uninterrupted numerical sequence and ascend to the needs of the content.
Correct:
<h2>
<h3>
<h4>
Incorrect:
<h2>
<h4>
<h5>
The correct example successfully goes from 2 to 3 to 4 without skipping any numbers. The incorrect example starts with 2 but jumps to 4, skipping the <h3> that should’ve been between them before correctly continuing with 5.
When ascending, headings can only go back up as far as <h2> while skipping the numerical sequence.
Correct:
<h2>
<h3>
<h4>
<h2>
Incorrect:
<h2>
<h3>
<h4>
<h1>
The correct example descends correctly in sequence, and then ascends back up to an <h2> tag. The incorrect example ascends back up to an <h1> which either implies there are multiple <h1> tags or the first instance of the <h1> tag happened after other headers. Both situations are erroneous.
Considering heading tags should contain some of the most important words and phrases on the page and assist search engines and screen readers with understanding the web page, it is a waste to leave them blank. Here’s an example of a blank heading tag with no content.
<h1> </h1>
Markup like this tends to show up when an editor wanted to create significant vertical spacing between lines of text that normal paragraph spacing wasn’t enough for. While the spacing created might be desirable, the downside isn’t worth it.
Another common situation is when a heading tag is wrapping an image:
<h1><img src=”image.jpg” /></h1>
While heading tags can contain an image, the image tag needs to include alternate text, or it will not validate. The correct markup looks like this:
<h1><img src=”image.jpg” alt=”description of the image” /></h1>
The alternate text now acts as the text the heading tag requires to validate.
If you’re unsure how to optimize your content or website for accessibility, schedule a consultation with DiscoverTec for accessibility identification and remediation services.
Published on: January 22, 2024 by Ryan Brooks, Senior Web Marketer