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