What are heading tags?
Heading tags are crucial to any webpage. They provide the user, and the search engine, with imperative information about the page’s content and structure.
On the front-end, from the user’s perspective, heading tags simply appear as titles and subtitles. Users often want to use headings just to change the font size of their text. On the back-end, where the developers write the page’s code, heading tags appear like so: h1, h2, h3 and so forth until h6. The reason for the numbered heading system is to show the hierarchy of information, and that hierarchy is crucial. H1 is the biggest and most important heading on the webpage, and h6 is the smallest and least important. There should only be one h1 on any given page, and it should be used for the title. If a developer places more than one h1 on a page, the hierarchy is compromised. There can be a couple h2’s and h3’s, and certainly as many h6’s as seem appropriate. Although most webpages do not use h6, it’s rare for a page to go deeper than an h4 unless it’s a dense piece of technical writing.
We can think of the heading tag hierarchy as akin to a monarchy. There is only one king or queen at any given time, and they are the most important and powerful part of the monarchy. Queen Elizabeth II is like the h1. There are a couple of princes and princesses, the second most important in the line, like h2. Then there are several Dukes and Duchesses, they are most likely not going to take the throne, but are still important of course, similar to an h3. And the hierarchy of titles goes as such, all the way down to h6, like Barons and Baronesses.
Another important note is that the actual paragraphs, the substance to the web pages, should never be contained in a heading tag, as they are not headings. Paragraphs have their own tag where they need to be contained, and to developers it appears as such: p. To continue the monarchy metaphor, p tags would be like the public: they make up the country/page, but do not have a title to their name.
Heading Structure Example
Still unsure about where to put what heading? Here is an example heading structure for a fictitious webpage about restaurants in our lovely Harrisonburg.
-
- H1: Where should I eat in Harrisonburg?
- H2: American Restaurants in Harrisonburg
- H3: Casual American Food
- H4: Name of a Casual American Eatery
- P: description of the eatery
- H4: Name of a Casual American Eatery
- H3: Upscale American Food
- H4: Name of an Upscale American Eatery
- P: description of the eatery
- H4: Name of an Upscale American Eatery
- H3: Casual American Food
- H2: Asian Restaurants in Harrisonburg
- H3: Casual Asian Food
- H4: Name of a Casual Asian Eatery
- P: description of the eatery
- H4: Name of a Casual Asian Eatery
- H3: Upscale Asian Food
- H4: Name of an Upscale Asian Eatery
- P: description of the eatery
- H4: Name of an Upscale Asian Eatery
- H3: Casual Asian Food
- H2: American Restaurants in Harrisonburg
- H1: Where should I eat in Harrisonburg?
How Headings Help Accessibility
Heading tags are also important for accessibility reasons, and this cannot be overlooked. For users who are visually impaired and are unable to read a computer screen, they might use a screen reader to navigate the web. Since heading tags are written in HTML code, they are easily understood by a screen reader, and will be read aloud appropriately. Screen readers can also offer shortcuts from one heading to the next, which is also good for navigation.
How Headings Can Help Search Engine Optimization
Finally, heading tags are helpful for search engine optimization. Search engine optimization, SEO, is the practice of taking the appropriate steps to increase your site’s ranking in search engine results; which is a crucial step in marketing your site. Heading tags can indirectly influence your rankings in the search results because they make your pages easier and more enjoyable to read, and they provide keyword-rich content for search engines. Headings improve page scannability for users and search engines, which makes it more likely to perform better in search results. Headings provide you with an opportunity to use keywords to better indicate what your webpage is about. A good rule of thumb is that if the headings let users know what your article is about, it’ll help search engines to understand too.
Heading tags are also helpful to increase your site’s chances of being a featured snippet on Google. If a site has optimized their heading tags with keywords, and framed it as a question, then answered that question in the p tag below, it’s more likely to be selected as a featured snippet if someone then Googles that question.
Don’t Forget About Headings
Do not overlook those heading tags, or their appropriate hierarchy. They are more important to a webpage than one might assume. So check to make sure your webpage has appropriately structured headings. It would be so confusing for a page to have more than one h1 tag, like a country with more than one king/queen, it did not end well in Game of Thrones, just saying.