Writers beware; those heading tags you use to make certain text appear larger than other text do a lot more for your content than add visual flare. For a human user that can see the screen just fine, heading tags serve no functional difference other than visual formatting. However, not everyone that visits websites has good enough vision to read them, and not every visitor is human. The six different heading tags, <h1> though <h6>, actually serve a hierarchical function when organizing content on a webpage. These tags are important because web crawlers use them to make sense out of your web page’s content, which in turn effects how well your site performs in search results. Good usage of the header tags means the web crawler has an easy time interpreting your page, whereas bad usage can confuse it and hurt your site’s ranking. Additionally, accessibility devices like screen readers, which read website content out loud to people who can’t see well enough to view your website, use the heading tags to help navigate page content.
Use for Structure, Not for Style
It’s very easy for writers to unintentionally use heading tags in a way that hurts page structure and SEO. For example, a writer may want to use the <h3> style to blow-up a particularly excellent quote in their work. Alternatively, in technical article writing it can look good to use the <h6> tag to format text following bullet points. Both of these use cases are incorrect: they are using the heading tags for style instead and ignoring the structural component. As the name implies, they work best when being used to act as “headings” for content sections.
Let’s take a step back and use these tags in something we’re all familiar with: books. The <h1> would be the title of the entire book, the <h2> tag would be used for the parts of a multi-part book, the <h3> tag would be used for individual chapters within the parts, and the <h4> tags could be hypothetically used to identify each page or unique sections within each chapter. The heading tag system allows for six levels of importance on a single webpage. On this webpage, the <h1> tag is used for the title “Headers, Screen Readers, and SEO, Oh My!” whereas the subsections within the content like “Use for Structure, Not for Style” used the <h2> tag. This makes sure web crawlers identify important things like the title and sections within a larger work correctly. Also, note that it’s okay to go from using <h1> straight to <h3> or even start with <h2> as the lowest number tag on the page. The heading tags are relevant to each other based on the lowest and highest numbered ones that appear on the page, not by their numeric value.
Use for Accessibility
Screen readers heavily rely on heading tags to help users that can’t see the screen navigate content. Think of them like page numbers in a book’s index that helps people find content quickly within a larger work. Screen readers can use things like headings, links, paragraphs, and navigation links to move quickly through content on a page, but many of these methods do not provide a whole lot of insight into what the sections on the page actually cover. Heading tags on a webpage help screen reader users navigate the content by providing descriptive information, making it easy to skip to the information they want to know or easily back-track to go over previously read content.
Properly using heading tags makes your website content easier to understand for both machines that index websites in search engines and people that have vision problems. Both of these things contribute to giving your content a wider audience, so including properly formatted heading tags can only help you.
Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.
