Each website is unique, with developers and designers putting their own distinctive entries into the code. But one element that every single website has in common are the heading tags (or header tags ). The heading tags not only divide your content more readable sections, but they create the semantic structure of your site so that search engines and accessibility software (screen readers) can recognize exactly what content is made.
Sometimes it gets a little confusing about the correct use and function of heading TAGs , so in this post we will go through all 6 levels of header tags and see how and when to use them correctly.
Why use HTML heading tags?
As mentioned, heading tags create the skeleton of your site. Without them, not only will the title and purpose of your site be unclear, but the content is viewed by users and search engine spiders as if it were a giant wall of text, even if you break it up using paragraphs.
If you don’t include HTML heading tags , your site will become inaccessible to many people because they simply can’t navigate the page and content.
Plus, search engines and other web crawlers that come to your site also browse through the headings. Recently, Google has taken semantics into account in its algorithm, which means that weighs heavily. The HTML heading tags are an important part of this, because communicate to Google and visitors where to find specific information on the pages, organized in hierarchical importance.
And each tag within your page helps this in its own way.
The heading tag hierarchy is important
The heading tag hierarchy is important. The order in which you use these tags can determine your site’s SEO.
You can edit them using CSS and make for example an H6 tag bigger, bolder and more prominent than an H2 tag, but you should still try to keep them tidy so as not to confuse crawlers (and readers).
Think of the tags in ascending order as if they were the headings for your post structure. You should just (generally) put a higher number below its immediate predecessor. You can nest them as deep as you want, but be sure to sequence only the next one each time.
Here is an example:
There may be specific cases where you have a single H6 on top of an H4, but for the most part, Google and other search engines determine the priority of the topic and measure the effectiveness of the content to search for intent using headings for browse your content.
Tag H1
The H1 tag is the most mundane of the HTML heading tags , albeit one of the most misunderstood. In most cases, you will see the H1 header as the title tag of a particular page or post. It’s what search engines will (likely) show in SERPs. Your browser will also show this in its title bar, although many SEO plugins and similar apps allow you to change this.
For this reason, while it is important to have the target keyword phrase in the H1 tag, it is not 100% necessary. Write the titles and titles semantically to respect the search intent of the visitors instead of inserting keywords in the HTML heading tags .
For years, the standard practice was to have one (and only one) H1 tag per page. For the most part, this is still good advice. Google and other search engines crawl your page and look for the H1 tag. They then use it to determine the topic, title, and structure.
However, Google has explicitly stated that having multiple HTML H1 header tags on your site does not incur any SEO penalties . This does not mean that you have to fill your page by inserting them everywhere, but that you can use more than one per page when the need arises.
When to use multiple H1 heading tags
The sole purpose of an H1 tag is to indicate a complete section on a single topic. This means that if you have a single page that has more than one topic, you could use an H1 tag for each new topic on that page. This would tell Google that your page isn’t just about the topic in the title. But there may also be a section below on a completely different (but related) topic.
On single-page websites, this is also important because on that page you may have an Information, Pricing, Contact and Portfolio section. So how do you let Google know that each section’s content is its own?
With H1 Tags , here’s how. You treat each section as if it were a mini webpage, using the hierarchy we discussed above. This way, Google sees the headings as it navigates through the page and can then determine which of those sections to pull featured snippets from (and so on) to answer searchers’ queries.
You can also choose to use an H1 tag whenever you use a section tag on your site, but we recommend that you only do this when it comes to a section of importance parallel to the page title, rather than a subordinate one.
H2 tag
H2 tags are probably the most used HTML heading tags on your pages and for good reason. Most posts and pages on the Internet consist of a single topic with a few subheadings.
Separate subtopics (or passages) for easier reading. Most of our posts, for example, are mostly made up of H2 titles (with H3 when applicable). This is because our articles are on a single topic, where we try to solve a single problem.
The H2 tag represent the individual steps that directly relate to the subject H1. In this particular post we used the following structure:
The H2 header tags in this post go over the main ideas, why to use it, how to get started and download it, how to set it up etc. While there are passages below those in H3 as well, the H2 titles indicate the large-scale topic of the article. They are a high-level view that crawlers and readers will be able to crawl to see if the article contains the information they are looking for.
In general, you will have several H2 tags per post, while you may not have subtitles nested below them. If your page or post is about a single topic that is not divided into sections with subsections like in the example above, it would be better to have more H2 tags than nested H2 -> H3 -> H4 because they indicate to crawlers that you are entering more. depth of a topic.
Tag H3
H3 tags, on the other hand, are the tags your articles can really dig into the details of your topic. You should never use these tags directly under an H1 tag. Google bot and search engines absolutely see them as subtitles. Whereas an H2 is accepted as the main title for sections within a single article (with the H1 declaring the main topic as the title, remember).
If you look closely at the image above, you will see that the actual style and sizing between our H2 and H3 tags are not very different. The reason is that we don’t want you to assume by scanning that any point we make in an H3 is less important than an H2. Because it isn’t.
It’s just smaller in size to indicate it’s a subordinate point to an H2, rather than a direct link to the overall topic, which is more structurally important with regards to SEO for your article.
For human readers, rather than bots, the visual distinction simply helps to move them down the page and break down the information for easier analysis.
Tag H4, H5, H6
We grouped them together for a reason. In general, it will be difficult to find sites that take full advantage of the full range of HTML heading tags from H1 to H6. The most commonly used structure is generally from H1 to H3.
H4
In most cases, the H4 tag will serve the same purpose as an H3 tag. You will use them to go into step details and examples, but always nested under the main headings. Designers generally modify them with CSS that is smaller than an H3.
They have limited use in normal content creation. A topic tends to be very in-depth if ideas need to be split so that an H4 header tag is needed .
H5 and H6
You can use the H5 and H6 headers, in two different ways
First way
(For an example only, we have broken this particular section into various parts via the header and we are now under H4 because it is a sub-topic of the main article.)
These headings are often used in similar summaries and lists, although their main function is technically the same as the others, outlining topics of decreasing importance throughout the page. It will be quite rare to find a document with a full range of headings up to H6.
Second way
Some people use the H5 and H6 tags as “special” formatting headers. They will apply special CSS to these two HTML header tags which are completely different from H1 to H4. You can then use them to call attention to topics and ideas that might otherwise be overlooked.
This isn’t technically the best, as the titles are hierarchical. However, if your site is overall well laid out and you use H5 and H6 sparingly as special styles on certain individual pages or posts, you will almost certainly have no problems with SEO.
Just remember that even when you use them for special formatting, you don’t have to break out of the hierarchy. Keep them in order. So, if you use H6 to style a subtitle, make sure the next one you use is an H1 or H2 tag to show that you are back to the standard structure.
How NOT TO USE heading tags
Don’t structure a single page with the entire header tag hierarchy all the way down. Use an H1 for the title tag and all H2s, instead of nesting each subsequent title.
Yup:
No:
Also, you shouldn’t use heading tags haphazardly but only in order, otherwise crawlers and accessibility software will have no idea how to navigate your page.
No:
In general, you can assume that a crawler knows that you have exited a subsection when it finds the next H1 or H2 tag. In the code snippet above, crawlers and bots would have a hard time analyzing the information structure of your topic.
Conclusion
The heading tags are an important part of any website. Using them correctly can improve your search engine rankings and the user experience of your site as visitors will be able to find the information they are looking for more easily.
Remember not to put too many keywords in your titles. While it’s a good idea to include the keywords or phrases you’re discussing to make sure your ideas are clear, Google bot and the other bots are pretty smart and understand when you’ve changed topics or are on the same.
Overall, using HTML header tags is incredibly important, but if you just keep a few simple rules in mind, your site will emerge in no time.
Good job!
