[ad_1]
Every website is its own unique monster, with developers and designers putting their own signature voices into the code. But one element that every single website has in common is HTML heading tags. Not only do these headings break up your content into more readable sections, they create the semantic outline of your site so that search engines and accessibility software can tell exactly what content makes up the site. There is occasionally some confusion as to the proper use and function of HTML heading tags, so we want to go through all 6 tiers and discuss how and when to use them correctly.
Subscribe To Our Youtube Channel
Why Use HTML Heading Tags?
Like we said above, these tags create the skeleton of your site. Without them, not only is the title and purpose of your site less-than-clear, but the content looks to users and to bots as though it were one giant wall of text — even if you break it up using paragraphs.
Plus, screen readers and accessibility software use them to navigate your content (sometimes literally). So if you aren’t including HTML heading tags, your site becomes inaccessible to many people because they simply can’t move around the page and content.
Additionally, search engines and other web crawlers that make it to your site navigate via your headings, too. Recently, Google has been considering code semantics in its rankings, meaning that search intent is weighed very heavily. Your HTML heading tags are a major part of this, telling Google and visitors where on the page to find specific information, organized by hierarchical importance.
And each tag within your page helps all of this in its own way.
Tag Hierarchy is Important
HTML heading tag heirarchy matters. The order in which you use these tags can make or break SEO for your site. While you can style them using CSS and make an H6 tag bigger, bolder, and brighter than an H2, you should still try to keep them in order so as not to confuse the crawlers (and readers).
Think about the tags in ascending order as though they are the headings for the outline of your post. You should only (in general), put a higher number under its immediate predecessor. You can nest them as many deep as you want, but make sure you only put the next one in sequence each time.
Here’s an example:
<h1>Title</h1>
<h2>Main Point Number 1</h2>
<h3>Subtopic</h3>
<h4>Very specific point</h4>
<h3>Main Point Number 2</h3>
<h4>Subtopic</h4>
<h5>Example or important chart</h5>
<h4>Specific point</h4>
<h5>Example or important chart</h5>
<h6>Highly specific example explaining this point</h6>
There might be specific cases where you have a single H6 above an H4, but for the most part, Google and other search engines determine topic priority and gauge content effectiveness to search intent by using headings to navigate your content.
H1 Tags
The H1 tag may be the simplest of the HTML heading tags, while also being one of the most misunderstood. In most cases, you will see the H1 heading as the title of a particular page or post. It’s what search engines will (probably) display in results. Your browser will also likely show this in its title bar, though many SEO plugins and similar apps let you change it for those. Because of that, while it’s important to have your target keyphrase in the H1 tag, it’s not 100% necessary. Write your headlines and titles semantically to cover visitors’ search intent instead of keyword stuffing the HTML heading tags.
The image above shows an H1 tag used as the entry title for an article on the Elegant Themes blog. It is the only H1 tag on the page, too. This indicates it is the topic of the content on the page.
For years, 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 seek out the H1 tag. They then use it to determine the topic, title, and structure.
However, Google has said explicitly that having multiple H1 HTML heading tags on your site incurs no SEO penalty whatsoever. That doesn’t mean go nuts using them everywhere on your site, but what it does mean is that you can use more than one per page when the need arises.
When to Use Multiple H1 Headings
The sole purpose of an H1 is to indicate a full section on a single topic. That means that if you have a single page that has more than one topic, you would want to use an H1 for each new topic on that page. Doing so would tell Google that your page isn’t just about the topic in the title. But there might also be a section on a completely different (yet related) topic lower down.
On single-page websites, this is also important because you might have an About, Pricing, Contact, and Portfolio section on that one page. So how do you let Google know that the content contained within each section is its own autonomous unit?
H1 tags, that’s how. You treat each section as though it were its own mini-webpage, using the hierarchy we discussed above in each. That way, Google sees the headings as it navigates across the page, and it can then determine which of those sections to pull featured snippets from (and so on) to answer searchers’ questions.
You may also choose to use an H1 tag each time you use a section tag on your site, but we suggest only doing that when it’s a section of parallel importance to the page’s title, rather than a subordinate one.
H2 Tags
H2 tags, now, are going to most likely be the most used HTML heading tag on your pages. And for good reason. Most posts and pages on the internet consist of a single topic with only a few subheadings. We recommend that every piece of content you create contain at least one H2 tag. Yoast and other SEO plugins suggest a heading roughly every 300 words. Depending on your content, that’s what H2 tags are for.
They separate out subtopics (or steps) for ease of reading. For example, most of our posts primarily consist of H2 headings (with H3 when applicable). That’s because our articles are on a single topic, where we’re trying to solve a single problem. We will have the title such as How to Use OBS Studio to Livestream as H1, but the subheadings like “How to Get Started with OBS Studio” will be in H2.
The H2 tag represents individual steps that pertain directly to the H1 topic. In that particular post we used the following structure:
<h1>How to Use OBS Studio to Livestream</h1>
<h2>What is OBS Studio?</h2>
<h3>What about SLOBS?</h3>
<h2>How to Get Started with OBS Studio</h2>
<h2>OBS Studio Setup</h2>
<h3>Setting Up a Scene in OBS Studio</h3>
<h3>Adding Sources in OBS Studio</h3>
<h2>Adjusting Sources Onscreen</h2>
<h3>RMTP Keys and OBS Studio</h3>
<h2>Wrapping Up</h2>
The H2 heading tags in this post go over the main ideas, such as getting started and downloading it, setting up the actual software, and then adjusting how your screen appears to viewers. While there are steps involved beneath those in H3, too, the H2 headings indicate the large-scale picture of the article. They’re a high-level view that crawlers and readers will be able to scan over to see if the article contains the information they are searching for.
In general, you will have multiple H2 tags per article, while you might have no subheadings nested under them. If your page or post is on a single topic that isn’t broken down into sections with subsections like the example above, it would be better to have multiple H2 tags than nested H2 -> H3 -> H4 because those indicate to crawlers you’re diving deeper on a suptopic than expanding on the post’s primary subject.
H3 Tags
H3 tags, on the other hand, are where your articles can really dig into the details of your topic. You should never use these H3 tags directly under an H1. Googlebots and search engines see them absolutely as subheadings. Whereas H2 is accepted as being a primary heading for sections within a single article (with the H1 declaring the main topic as title, remember).
If you look closely at the image above, you will see that the actual styling and sizing between our H2 and H3 tags aren’t terribly different. Reason being, 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’s not.
It’s only smaller in size to indicate that it’s a subordinate point to the H2, rather than a direct tie to the overall topic, which is most important from a structural standpoint regarding the SEO for your article. For human readers, rather than robots, the visual distinction simply helps move them down the page and break the information down to parse more easily.
H4, H5, H6 Tags
We’ve lumped these together for a reason. In general, you will be hard pressed to find any sites that make full use of the H1 to H6 range of HTML heading tags. By far, the most popular structure is H1 to H3. Just like you rarely see a content outline to beyond the second nested level.
I. Idea
A. Subpoint
1. Detail
II. Idea
A. Subpoint
1. Detail
III. Idea
H4
For the most part, the H4 tag will serve the same purpose as H3. You will use them to go into detail for steps and examples, but always nested below your main headings. Designers generally style them with CSS smaller than H3. They tend to see limited use in ordinary content creation. A topic tends to be very in-depth if the ideas need to be broken down so that an H4 heading tag is needed.
H5 and H6
You can use H5 and H6 headings, in a couple of different ways.
The First Way
(Just for an example, we’ve broken this particular section into various parts via heading, and we are now under H4 because it’s a sub-subtopic of the main article.)
These headings are often used in tables of contents and similar lists, though their main function is technically the same as the others, delineating topics of descending importance throughout the page. It will be pretty rare to find a document with a full array of headings down to H6.
The Second Way
Some people use H5 and H6 tags as “specialty” formatting headings. They will apply special CSS to these two HTML heading tags that is completely different from H1 to H4. You can then use them to call attention to topics and ideas that might otherwise get overlooked.
This isn’t technically best practice, as headings are hierarchical. However, if your site is structured well overall and you use H5 and H6 sparingly as specialty styles on certain individual pages or posts, you will almost certainly take no SEO hit.
Just remember that even when you’re using them for special formatting, you don’t break out of the hierarchy. Keep them in order. So if you use H6 to style a subheading, make sure the next one you use is an H1 or H2 to show you’ve moved back to the standard structure.
What Not to Do with HTML Heading Tags
Do not structure a single page with the entire hierarchy of headings all the way down. You are better off with an H1 for a title and all H2s, rather than each successive heading being nested.
Yes:
<h1>Title</h1>
<h2>Main Point Number 1</h2>
<h2>Main Point Number 2</h2>
<h2>Main Point Number 3</h2>
<h2>Main Point Number 4</h2>
No:
<h1>Title</h1>
<h2>Point Number 2</h2>
<h3>Point Number 3</h3>
<h4>Point Number 4</h4>
<h5>Point Number 5</h5>
<h6>Point Number 6</h6>
Additionally, you don’t want to use the headings haphazardly. Only use them in order. Otherwise crawlers will have no idea how to navigate your page, nor will accessibility software.
No:
<h1>Title</h1>
<h3>Point Number 2</h3>
<h2>Point Number 3</h2>
<h6>Point Number 4</h6>
<h5>Point Number 5</h5>
<h4>Point Number 6</h4>
In general, you can assume a crawler will know that you’ve moved out of a subsection when it finds the next H1 or H2. In the above code snippet, the crawlers and bots would have a hard time parsing the structure of information.
Wrapping Up with HTML Heading Tags
And see? We’re back to an H2 heading to wrap things up. Heading tags are an important element of every single website out there. Using them properly can increase your search engine rankings, as well as the UX of your site since visitors will be able to more easily find the information they’re seeking in your content. Remember to be sure not to keyword stuff too many of your headings. Although it is a good idea to include the keywords or phrases you’re discussing to make sure your ideas are clear, Googlebots and others are pretty smart and can tell when you’ve swapped topics or are on the same one. Overall, using HTML heading tags is incredibly important, but if you keep just a few things in mind, your sites will shine in no time.
Have you been using HTML heading tags correctly?
Article featured image by VectorV / shutterstock.com
[ad_2]
Source link
