When optimizing your content for SEO, one of the first steps you need to take is make sure that your HTML header tags are applied correctly. How many of each should you use, where should you use them, and what are the best practices to follow to make sure your page is optimized to maximize visibility and search engine performance.

HTML header tags are available in HTML5 from H1 to H6 with all major browsers supporting all six. Use H1 to define the most important heading in your content, and only use it once. This tag will typically be the title of your post/page. As the numbers rise, it indicates less important sub-headings. HTML header tags are similar to using bullet and number points in an essay, with each higher number referring to a more specific category.

The H1 HTML Header Tag

The H1 tag is the most important of all header tags when it comes to SEO, and should only be used once. The H1 tag is where you want to include the major keywords that you are trying to rank for. While there is no technical limit on the length of the H1 tag, you do want to avoid keyword stuffing and making it too long. For one, Google’s RankBrain AI will uncover that you’re stuffing keywords and may penalize you. Secondly, long headers/titles can turn off potential readers, costing you leads and increasing your bounce rate.

As with all of your content, write for the readers, and not for the search engine crawlers. Content is king. Avoid SEO tricks that may garner some initial success, and instead on building content that is authoritative, engaging, and is built to withstand any algorithm changes Google may throw at you.

The H2-H6 HTML Header Tags

The rest of the Header tags follow a top-down hierarchy, to underscore sub-headings. You can use as many or as few Header tags on your page as you feel necessary, but be sure not to skip headings by going from an H2 to an H4 directly. Most pages will typically only go to H2 or H3, and there is no requirement to use all six headings available. A concise post on a single topic should feature one H1 tag as the title, a few H2 tags as the titles of the various paragraphs/sections of the article, and maybe some H3 tags sprinkled in as group/list headings if necessary.

What effect do HTML Header tags have on SEO?

At one time, the H1 tag was critical to SEO success and was considered second only to keywords. As Google moves more towards semantic search, the H1 tag is losing its importance. Backlinko’s research of over 1,000,000 search results shows that while the importance of the tag is falling, it is still a signal that is used by Google and should be keyword-optimized.

Properly formatted and optimized header tags can also help search engines better read and display your content. If there is a problem with the H1 tag, Google may use one of your other tags as the headline on the Search Engine Results Page, directly affecting your Click-Through Rate. Search engines will also compare your tags to the rest of your content, ensuring relevant and continuity. As with all things SEO, it’s hard to determine whether HTML Header tags are more or less important than other signals. What we can be sure about, however, is that they do have an effect on your SEO performance. Considering they also help format your content into easier to read sections, you should be ensuring that the content you write properly uses these header tags.

HTML Header Tag Best Practices for Length and Nesting

Can you skip the H2 tag and go directly from H1 to H3? Can’t you just use a bunch of H4 tags after H1? The reasons for tweaking hierarchies like this is most often for design reasons. Different tags will have different default values for things like size, margins, and font weight.

The hierarchy you use in your content should be dependent on the hierarchy of your content. The H1 tag is supposed to underscore the most important and often broadest and most encompassing tag, with progressive tags becoming less important and more specific. These tags by default are formatted from largest to smallest, and this may not always be ideal for design considerations.

These header tags serve a real purpose, and are not just tags you can use to adjust the look of your website. It is not worth taking shortcuts and hurting your SEO for the sake of design reasons, especially when you can adjust these default settings. In WordPress you can use the <span> tag to make custom adjustments as in the following example:

<h2><span style=”font-weight: 400; font-size: 12px; color: #000; line-height: 1.4;>Husaria Marketing’s Sample Custom H2 Header</span></h2>

HTML Header Tag Browser Support and Default CSS Settings

HTML headers H1 to H6 are supported in full on Chrome, Edge, Firefox, Safari and Opera. Note that HTML5 no longer supports the “align” attribute, so you need to use CSS to align elements. Most browsers will display the header tags with established default values.

The default values for HTML H1 header elements in most browsers are:

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

The default values for HTML H2 header elements in most browsers are:

h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

The default values for HTML H3 header elements in most browsers are:

h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

The default values for HTML H4 header elements in most browsers are:

h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

The default values for HTML H5 header elements in most browsers are:

h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

The default values for HTML H6 header elements in most browsers are:

h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

Simply put, header tags give search engine crawlers the information they need to properly identify and sort the content on your pages. With the advent of advanced AI and machine learning algorithms like RankBrain and BERT, properly built and annotated websites are critical to your online visibility and SEO performance. Get in touch with us today for a free SEO website audit, and we’ll help ensure the content you’ve word so hard on gets the visibility it deserves.