When I started blogging, I had no idea how to structure my posts to rank for search engines or why it mattered.

I just put in bold words and phrases that looked nice and hoped to get picked at random for the Search Engine Results Pages (SERPs).

Now I know blog optimization is a science, and what I threw on my blog posts to make them look professional was called header / heading tags – and is an important tool for understanding and SEO.

Here is a quick guide to header tags and how to use them:

• H1 – The title of a post. They’re usually keyword oriented, focused on the “big idea” of a page or post, and designed to grab a reader’s attention.
• H2 – These are sub-headings that classify the main points of your paragraphs and separate sections. Consider using semantic keywords related to the “big idea” in your first semester and help the reader easily find the sections they want to read.
• H3 – These are subsections that further clarify the points made in H2. Alternatively, they can be used to format lists or bullets.
• H4 —These are subsections that further clarify the points made in H3. Alternatively, they can be used to format lists or bullets.

The “H” in H1, H2, etc. officially stands for “Heading Element”, although the SEO community commonly refers to these tags as “Header Tags”.

As you can see from the guide above, the number indicates the hierarchical relationship between each one (where H1 is most important, H2 is less important, etc.).

Here is an example of how this hierarchical structure could manifest itself in a blog outline:

Now that you understand that header tags add structure to a page, let’s dig deeper into that, starting with the H1 tag.

Don’t make the mistake of using header tags just as style elements. After all, they are structural in nature. Think of the H1 like the title of a book. Usually there is only one title for a book, so there should only be one title for your page or post.

Additionally, H1 tags should always be at the top of your page before the rest of your content, just like the book title is on the outer cover, before diving into the text inside.

As an illustration, in the example below, the header tag is “The Ultimate Guide to Product Marketing 2021”.

The title is set as H1 for the page using HTML code. This code can manifest itself in the source code of the website as follows:

See example 1 for pen H1 by Christina Perricone (@hubspot) on CodePen.

However, as mentioned earlier, there are other heading tags that are helpful in creating the structure of a page.

How many header tags does HTML support?

HTML supports up to six header tags (H1-H6) that you can use to structure your page as needed. They can be visually stylized according to your brand. With the exception of the H1, you can have as many of these tags as you want on one page.

Your headings should stick to the topic you are writing about as they can help the reader (and the search engines) find the main points in the content and guide them through the flow of the page. Use your best judgment while formatting when breaking up sections.

Below is a screenshot of a HubSpot blog post with examples of header tags marked with arrows:

As you can see, each header tag looks different, and each header tag is used for a new idea.

Now that you know a little more about header tags, let’s see how they’re used for search engine optimization.

Header tags and SEO

You might think that header tags don’t matter in the grand scheme of website-related things. However, header tags can help structure content and draw attention to the most important ideas, topics and (actually) attention. keywords in this content. As a result, header tags have weight with keyword relevance and readability.

Note the following: Google finds content that is made available to its users by crawling websites. Text, images and other elements are analyzed to understand what this page is about.

When you put text in a header tag, you signal that that text is important, and Google uses this to determine the context of the page. This allows Google to provide results that are relevant to search queries.

For this reason, when using header tags, it is important to ensure that they correctly match a keyword’s intent. If a post’s H1 tag doesn’t have a keyword, or if you put irrelevant text in H2 and H3 tags, it’ll make it harder for Google to understand a page. As a result, this page is not ranking as well as it could.

For illustration purposes, let’s say your keyword is “ecommerce”. You want this to be reflected in your H1 tag. So a title like “The Guide to Starting an Ecommerce Business” is ideal. That would tell Google exactly how to send web browsers to your post.

Search engines also look at header tags in your post, so it’s good to target them with keywords too. For example, you can create some H2 sections that contain popular long-tail keywords related to e-commerce, such as: B. “Five Steps to Creating an Ecommerce Business” or “Best Social Media Tools for Ecommerce”.

You don’t have to think about keywords yourself either – in fact, you can do simple keyword research for help or look into keyword research tools like SEMRush or Ahrefs. Just make sure your header tags are suitable for both humans and search engine robots.

Headings also make pages easier to read. By separating different parts of a web page, information is organized and broken down in an understandable way. This helps readers find information they are looking for, but also search engines that scan too.

If your sections don’t make sense, your page may not be ranked. Think about the sections in this post – do you think they have been broken down legibly?

How to add header tags in HTML

Adding header tags in HTML is a pretty straightforward process. If you want to write down an H1, type

and and put the H1 text between these two tags. This is the same method for all types of header tags.

For example, if your h1 “The Guide to Starting Ecommerce,“it would look like this:

See Pen H1 example 2 by Christina Perricone (@hubspot) on CodePen.

This works for HTML4 or older. If you’re working in HTML5, you may need to use a slightly different line to get the same result. The change is to let Google know what the first half of the year is:

See example 3 for pen H1 by Christina Perricone (@hubspot) on CodePen.

You can also add punctuation between the two tags. For example, you could have:

See example 1 for pen H3 by Christina Perricone (@hubspot) on CodePen.

Remember, Google scans the HTML of header tags to let web browsers know what your page is about. So it’s important to double-check them and see if your headers are properly formatted in HTML.

Some blogging platforms like WordPress and HubSpot have an option on the toolbar that you can use to create header tags. Every time you want to add one, you don’t have to deal with the source code or HTML.

The next time you’re creating a post for your website, check to see if adding relevant header tags affects search engine optimization and how your readers understand information.

A good test that I like to use is sending posts to a close family member who doesn’t know much about blogging or marketing. By using outside feedback and asking if they can understand my writing before I publish it, I can format posts so that they are understandable.

Since using headers can improve readability for your users as well as crawlability for search engines, there is no reason not to use them when creating pages and posts. You may even see jumps in search engine rankings, traffic, and time on the page.

Editor’s Note: This post was originally published in January 2020 and has been updated for completeness.