Heading Tags: The Importance of H1, H2, & H3 Tags and How to Use Them
The heading tags not only help with the organization of your design, but they help with the search engine optimization of your site as well. This post will go over how to use heading tags, how they help with SEO, and how to use them in your design to achieve good SEO, but not distract from the design.
What are Heading Tags?
Heading tags are the tags used to organize the content of the site. In the beginning, the internet was used for sharing information like scientific papers and other seemingly boring articles. These papers and articles needed to be structured for easy reading.
Enter the Heading Tags!
- H1
- H2
- H3
- H4
- H5
- H6
These tags act much like an outline of a paper. The main title of the outline would be an H1 tag, the section title would be H2, the subtitles of the sections after that would be H3, etc.
I. H1
A. H2
1. H3
a) H4
(1) H5
(a) H6
Web sites are not built out like this anymore. New uses for the H tags have been developed, but the basic use is still relevant.
How Do You Use Heading Tags?
The H1 tag is the heading of your page. H2 tags are for additional keywords that are not as important as the H1. The H2 can also support the H1. H3 tags are for the titles of the different sections of your content, but are not to be used as the title of the page. That is for the H1 tag. H4, H5, and H6 tags are not as important as the first three and can be used as subheadings to the content sections.
A great example of the use of heading tags is in Dr. Green’s site, who is a New Jersey Cosmetic Dentist. His site uses the first three heading tags to help organize the site. The neuromuscular dentistry page on his site shows the H1 tag as the title, which is “Neuromuscular Dentistry.” The H2 tag is the areas he serves and reads as “Serving Caldwell, Morris County, Newark, and Passaic, New Jersey.” Lastly, the H3 tag is used a few times on the page for the titles of the sections in the content. Examples of his H3 tags are Neuromuscular Dentistry and Your Smile Makeover, Dentures, and TMD.
How Do Heading Tags Help With SEO?
I’m glad you asked that question.
The H1 tag is the most important of these six tags and should be placed at the top of your content so that visitors to your site can easily understand what the page is about and so the search engine robots can see it before the rest of the content when they crawl the page. The H2 is the next important and can be used as a subheading. H3 tags are not as important as H2 tags and are a little more important than just bolding text. The rest of the heading tags don’t really hold much weight for keywords. So, you are okay to just bold the text from here.
Search engines like to see the first three heading tags because it helps them understand what the pages of your site are about. As always, the most important tag is the Title tag in the heading section of your page, but the heading tags help reinforce the Title tag. With that said, the H1 tag should repeat the Title tag, but it does not have to be verbatim. The same keywords should appear in both tags.
You want to only use the H1 and H2 tags once on a page, but the H3, H4, H5, and H6 tags can be used multiple times. The H1and H2 tags should only be used once because they carry so much weight and you don’t want your page to look like the SEO is more spam related.
As a continued example, Dr. Green’s neuromuscular dentistry page’s Title tag reads “New Jersey Neuromuscular Dentistry” and the H1 tag reads “Neuromuscular Dentistry.” New Jersey is not repeated in the H1 tag, but is repeated in the H2 tag. Both the H1 and H2 tags reinforce the Title tag.
Please do not confuse the heading tags with the heading section of your site. These tags do not belong in this section. Only the Title and Meta tags go here. Again, do not add the heading tags between <head> and </head> on your pages.
I was reading a SEO chat forum where someone asked if it is a good idea to use H3 tags in the navigation. This is not a good idea. Heading tags cannot have an anchor tag on them. In other words, heading tags cannot be links. The code will not validate in the W3C’s Markup Validation Service, which is used to make sure that the code of your site is correct and complies with the W3C’s rules. You are better off to bold the navigation in your CSS to help add emphasis to those links.
How Do You Use Heading Tags in the Design of a Site?
Here is where you luck out. Heading tags, unfortunately, have a preexisting style and format. H1 tags are gigantic and take up way more space than needed. They don’t go with any design and just completely destroy the flow of the design.
But there is an easy fix. It’s called CSS! All you have to do is specify what you want your tags to look like in your CSS file. Here is an example. Say you wanted your H1 to be a nice green with a font size of about 30 points and with some room below it so it will not crowd the H2 tag. Next, you want your H2 tag to be black at about 18 points with a bit of room below so it will not crowd your content. Lastly, you want your H3 tag to be a nice dark gray about the same font size as the H2 tag with some room around it to stand out from the content. Here’s how your CSS would look:
h1 {
color: #096C57;
font-size: 30px;
padding: 0px 0px 30px 0px;
margin: 0px;
}
h2 {
color: #000000;
font-size: 18px;
padding: 0px 0px 30px 0px;
margin: 0px;
}
h3 {
color: #6f6f6d;
font-size: 18px;
padding: 0px 0px 30px 0px;
margin: 0px;
}
That’s all there is to it. Now you can design your site using these bulky heading tags, but design them to flow with your design and help out your SEO. It’s a very cool thing, really. And very satisfying.
