Heading tags (also referred to as H tags or header tags) are semantic HTML elements that help to organize your website. They separate subsections of your content, which is particularly important if you’re writing longer articles. In this blog, for instance, we use several heading tags — and most readers will simply skip to the heading that interests them.
That’s the primary reason that H tags are so important: Internet users usually won’t read content from beginning to end. By organizing a page in a predictable way, content creators can help users find what they need.
Heading tags are particularly important for people with disabilities because many assistive technologies (such as screen readers) use heading tags to make navigation easier. By using heading tags properly, you can expand your website’s reach and deliver a consistent experience for all users. In this article, we’ll discuss the importance of H tags and introduce a few best practices.
Make sure you use heading tags properly
Standard HTML supports up to six heading tags for page structure. Many content management systems incorporate these headings into their text editors, and subheadings are often pre-formatted in systems like Wordpress and Joomla. However, you shouldn’t choose headings based on their visual appearance; using a heading sends a clear signal to web browsers and assistive devices.
Here’s a quick overview of how each tag functions:
- H1 tags - The primary heading of a page. This is usually similar or identical to the page title. On this page, the <h1> tag is: “What Are H Tags? How Headings Affect Accessibility.” Pages should only have a single H1 tag.
- H2 tags - These tags divide the content under the <h1> tag. Our first <h2> tag in this piece is “Make sure you use heading tags properly.”
- H3, H4, H5, and H6 tags - These tags continue to divide content underneath each section.
Think of heading tags like the headings in an essay: By using an H3 tag, you’re telling users that they’ll find information related to the H2 tag. If you’re using an H4 tag, you’re telling them that the content is related to the previous H3 tag, and so on.
For instance, if your <h1> tag is “Cars for Sale in Ohio,” your H2 tag might be “Nissan Car Sales in Columbus, Ohio,” and your H3 tag might be “Nissan Versas.” Most websites will use H1, H2, and H3 tags regularly, but other header tags should be used sparingly.
H tags help browsers and assistive devices navigate content, but they’re also used by designers as style elements. It’s important to use headings in a predictable and consistent way — if you’re unsatisfied with the visual appearance of a certain tag, style the heading via CSS. Always try to use headings in sequential order.
Read: Why Headings Aren’t Simply Styling Elements
Heading tags are important for accessibility
Heading tags can change the appearance of a page, and as mentioned above, you can style your headings however you’d like. However, remember that H tags are semantic elements first. Their primary purpose is to convey meaning about your page’s organization.
Here’s why that’s important: Web browsers and assistive technologies use heading tags to control navigation. For example, a person who browses the internet with a keyboard may use hotkeys to switch focus from one heading to the next. Screen reader users may read header tags before engaging with other on-page content.
If headings are out of order — or if they don’t provide relevant information about your content — your users may become confused or frustrated.
Read: How Headings Help People with Disabilities Navigate a Website
Well-written H tags can improve SEO
Heading tags also play an important role in search engine optimization (SEO). Search engines analyze keywords from headers to determine what your content’s about; if your only header tag says something generic, you’ve missed an opportunity to optimize.
To make sure you’re using H tags properly, keep these tips in mind:
- Make sure every heading provides clear, concise information about your content.
- Make sure you’re using your H tags in sequential order.
- Don’t attempt to use every available heading tag on every page.
- Make sure your heading usage is consistent across your entire website.
While you’re reviewing your semantic HTML, check that every page has a descriptive title tag and make sure you’re leveraging other HTML attributes to make your site more accessible. These improvements can also improve your search ranking positions, and they’re extremely helpful for users.
This is a much easier process if you prioritize accessibility early in your website’s design and development, but if you’re working on an established website, our free website analysis can help to identify subheading issues and other accessibility concerns. By using subheadings properly, you can make your content more scannable for all users — and much more accessible for people with disabilities.
