Header tags are title, headers and sub headers on a website. They are defined in the HTML of a page and come in six different levels: h1, h2, h3,h4, h5, and h6.
The h1 tag is the most important and is usually the article’s title. H2-h6 tags are known as subheadings. These are used to describe the different sections within an article.
The picture below shows how an h1 and h2 header will look in the HTML of a post. We will get into that a little more later, so if it looks like a foreign language, don’t worry. I just want you to see that they are in the HTML of posts for now.
What is a Sites HTML
Before getting into specific elements of a site’s HTML, we should probably define what the HTML is. HTML stands for Hyper Text Markup Language, and it is the standard markup language for creating websites.
To put it simply, HTML is just a set of instructions that tell web browsers what is on the page and how to display it.
When you create a post, you are adding elements to the page. These are things like headings, paragraphs, pictures, videos, buttons, etc. With drag and drop page builders (like Elementor or Beaver Builder), we don’t pay much attention to it. We just move an element where we want it and that’s where it shows up in our post.
But behind the scenes, when you drag and drop that element into your post, the page builder is really creating and organizing pieces of HTML text. This HTML text is what tells web browsers what the element is, where it goes, and what it looks like.
So when someone clicks on one of your posts, the web browser is pulling that information from your HTML file and building the page EXACTLY how you created it. It’s a pretty simple, yet very cool process. Before drag and drop builders, people had to go in and build out the HTML for everything on a website. These page builders have made life a lot easier.
If you want a more depth explanation, you can check out this HTML introduction post by W3 schools.
Why Are Header Tags Important?
Now that we have a basic understanding of what HTML does, we can start to understand what header tags do. Using header tags has a variety of benefits:
- Help search engines- When search engines crawl your site, they are trying to determine what the content is about. Header tags help them do this.
- Create a content hierarchy– The h1 is your most important header. This is followed by the h2-h6 headers. This helps both readers and search engines understand what is the most important information on your post.
- Help the reader– Do you want to read big blocks of text? Of course not. Headers help us separate information into manageable blocks of text. This allows the reader to easily scan the information to find exactly what they are looking for.
- Are used for featured snippets– Search engines will use information from header tags when deciding what information will be a featured snippet.
Do Header Tags Help With SEO?
Header tags DO have some SEO value, but it is more indirect. Search engines don’t give header tags a lot of influence in the algorithm, but they do have value.
- As I said earlier, header tags help search engines understand the content. If a search engine can’t determine what your content is about, that page won’t be delivered as a search result. Header tags help get your page delivered.
- They create a better user experience. If I see a post that is just one block of text, there is no doubt I’m backing out of that page. This hurts your SEO value. Search engines want people to spend time on pages. If your page looks nice and organized, people will spend more time there. When people spend more time on the page, your ranking goes up.
- Header tags do play a small factor in the search engine algorithm. It isn’t much, but if you have the same general article as someone else, header tags may be the little bump you need to push ahead of them.
Title tag VS h1 tag
Before really get into header tags, we need to clear up a common misunderstanding. A lot of people think the h1 (which is usually the title of a post) is the same as the title tag. It is a little confusing, but they are not the same.
The title tag is what shows up on search engines. It is located in the “head” of your HTML.
h1 tags are the title of your post. These show up in the “body” of your HTML.
A lot of sites make the title of the article and what shows up in search results the same. It makes sense to do that. But you don’t have to make them the same. Let’s look at some examples.
Title tag VS h1 tag : Example #1
For this example I searched for “best flower delivery services” and this article from Good Housekeeping popped up. “14 Best Flower Delivery Services 2021 – reviews of Online…” Perfect. Exactly what I was looking for.
This is what showed up on the search results page, so we should be able to find it in the head of our HTML under a title tag.
Sure enough, there it is.
Now, we have clicked on that Google search link and brought up the web page. The first thing we see is the post’s title “The Best Flower Delivery Services for Every Occasion (That You Can Order Online).”
That is similar to what we saw in the Google search, but it’s not exactly the same.
This is because they have made the h1 tag text different from the header text.
We know that the posts h1 tag can be found in the body of our HTML and there it is. The h1, which is the title of this post, matches what we see on the top of the post.
This isn’t something you need to get overly concerned with. I just want you to know that what shows up in a Google search may not necessarily match the post title exactly. This is because they are separate things. Let’s look at one more example.
Title tag VS h1 tag: Example #2
For this search, I am looking for the “Best Smart Refrigerators.”
The google search result I got was “7 Best Smart Refrigerators for 2021 – Smart Fridge Reviews.”
Perfect. That’s what I’m looking for.
When we look at the HTML for the post, we see our Google search result show up in the head section with a title tag, just like we knew we would.
When we click on the link to open the page we see the post title is different from the Google search result.
WHY?
Because the h1 tag is different from the title tag.
Once again, we confirm this by looking in the body section of our HTML. There we see the h1 matches what is at the top of the post.
Again, this isn’t something you should dwell on. Most of the popular SEO tools will take care of this or walk you through it. I just want you to know they are different so you don’t get confused if it ever comes up.
Example of Header Tags in HTML
At the beginning of this post, I showed you a little snippet of HTML text. Now we will go a little deeper and show what that actually means.
Below is a screenshot from the first part of the article. You can see the title of the article is “Dog Breeds That Don’t Shed.” Below that you see it’s a Chewy article and the post date. We are really only concerned with the title.
Being the title of the article, we can expect to see it in a h1 tag in the page’s HTML.
Below you can see the h1 header tag in the posts HTML.
Sure enough, there is the h1 tag with the titles text. Now when people read this article, they will see the title at the top. Search engines will also know this article is about dog breeds that don’t shed because that’s what the h1 is telling it.
As we scroll down this article we come to a couple of new sections. There is “Dogs That Don’t Shed or Shed Less” and “Small dogs that don’t shed.”
Now lets see what that looks like in the HTML. The red will be our h2, blue will be h3, and green represent list items.
I highlighted the list items because they could have had an h4 tag if the author had wanted to go down that road. If each breed had a small section about their coat, an h4 heading would have made sense. Since they just listed breeds, a list tag is appropriate.
One More Header Tag HTML Example
This one is a little different from the last example. Here we are looking at the first two things on the home page for Nike.
When you pull up the HTML, you will see they have the first section listed as an h1 and the second one listed as an h2.
From this we can assume Nike values the top section the most. It is probably where they hope traffic goes to.
One more important thing to remember is the distinction between the h1 and the title tag. Most blog posts make them similar or the same. But for Nike’s home page it would not make sense to have “For Everyone On Your List” show up on the search engine results.
As expected, we don’t see “For Everyone On Your List” anywhere. Now, if we look at the title tag we see “Nike. Just Do It. Nike.com”
How to Add h1-h6 Tags With Elementor
For my sites, I like to use the Elementor page builder. If you don’t have Elementor you can download it in your WordPress plugins, or just use your preferred page builder. Most of them will be similar.
The first thing you need to do is choose posts on the left-hand column of your WordPress dashboard. That will bring up your posts page. From there, you will want to click add new.
Once you’ve clicked “add new”, the new post will open up. Here is where you enter the post’s title. This will become your h1.
Once you’ve entered a title click “Edit with Elementor.”
Once you’ve clicked “Edit with Elementor” you will be brought here. Click the little + symbol to add a new widget box.
Once you’ve clicked the + you will be asked to choose a structure. I like the first box for my h2 headings.
Now we are just going grab the heading element (by clicking and holding it) and drag it over to our new box.
Now we are able to name our new section.
If you already have an h2 and want to add an h3-h6 heading just click the dropdown menu titled HTML Tag.” This will let you choose what heading you want.
And that’s all there is to it. Now you can add text boxes, pictures, or whatever else below your headings to create some great posts.
Adjust h1-h6 Size With Elementor
Sometimes the header text may look too big for how you want to use it. We know that h1 is typically the largest and text size decreases as you wove to h6. You may be tempted to just use a different “h” header to get the desired size.
You will want to avoid doing this. Headers create a hierarchy, so you don’t want to have h3 without having h2’s. The way to fix this is to just adjust the size.
In Elementor look towards the bottom and you will see “size.” Next to that there will be a drop-down box. Here, you can adjust the text size. Doing this will keep the correct header tag while also giving you the size you want.
Final Points on h1-h6 Header Tags
- You should only have one h1 per post. It will be the post’s title.
- You want your h1 to be unique for each post. Don’t use the same post title multiple times.
- Follow the hierarchy. h1 is the most important, h6 is the least.
- Separate large blocks of content with h2-h6 subheadings.
- Use keywords when appropriate. Stuffing them will hurt you in SEO, but using them where it seems natural will help.
- You can use as many h2-h6’s as you need.
- The h1 tag and title tag are different.
And that’s it. All she wrote. If you keep header tags in the back of your mind, use a page builder, and have an SEO tool… you should have no problem.
Good luck out there.
