What Are Header Tags?

Have you heard of header tags, headers, or headings and wondered what they are exactly? You may have noticed you can add them in a word document to change the appearance of words, but their use goes beyond that.

Read on to learn more about header tags, why they are important for SEO content writing, and how they help both human and bot website visitors.

What are header tags?

Header tags are HTML elements that can be used to distinguish headings and subheadings from the rest of your content. When you designate a selection of words as a header, two things will happen.

1. First, the appearance of the text will change. Usually, the font size will get larger, the words will get bolded, and the font itself may change. See the heading above this section as an example.
2. Beyond what you can see, a piece of code is added behind the scenes that tells web crawling bots that the text is a header. That’s important because bots can’t see the stylistic elements on your page.

What is the purpose of header tags?

Header tags help to serve a few main purposes including making your content skimmable, accessible, and optimized for search.

Make content skimmable

Big blocks of text can be overwhelming and hard to read. Plus, most people today are in a hurry and want to skim content. Headers show the main topics of the page so readers can easily skip ahead to the information that’s most important to them at that moment. They also can quickly tell that the page has the info they need.

Make content accesible

Header tags also help visually-impaired website visitors using screen readers. Instead of just reading through everything on your page without discretion, the users will be told about new sections and their topics.

Optimize content for search

Then, there are the SEO benefits. Header tags tell search engines what your page is about and what’s most important. By using them properly, you can help your page show up in the search results for the right keyword phrases.

How many heading tags are there in HTML?

There are six different HTML heading tags — H1 through H6. They’re ranked in order of significance with H1 being the most important and H6 being the least. Here’s a closer look at each tag and what it’s used for. 

H1 tags

An H1 tag is usually used for the page title, so it only appears once in each article. It’s the largest, most important element on the page and immediately signals to the reader what the content is about. 

H2 tags

H2 tags are typically sprinkled throughout an article to show readers the main sub-topics covered under the main topic. For example, if a page is about making orange juice, H2s might be used to show the ingredients section, the directions section, and the other tips section.

H3-H6 tags

H3 tags appear under H2 headings and create smaller subsections that break down the main topics further. They can also be used to make lists beneath H2 headings, instead of bullet points. 

Most articles stop at H3 headings. But some complex topics may call for H4, H5, and H6 heading tags to dig into the finer details. 

Heading tag examples

The top-ranking article for the keyword “boost your SEO” is a great example of how to use heading tags in the correct order. The title is the largest element on the page and clearly shows readers the article is about improving your site’s ranking. 

The H1 tag is followed by a relevant H2 tag that delves into how to boost your SEO by publishing authoritative content. Then, the author uses two subsections about keywords to break the topic down even further. The H3 and H4 tags are different sizes and colors to help users differentiate them and create an information hierarchy. 

5 heading tag best practices

Heading tags can improve the user experience on your website but they can also hurt it if used incorrectly. Here are a few best practices to follow.

1. Add heading tags properly

Most content management systems and word processors let you add heading tags and they attach the necessary HTML. WordPress, for example, has a dropdown menu in the content editor that allows you to select a specific heading tag and apply it to your text.

However, be careful not to confuse this feature with changing the basic font options. Making the text bold or changing its size won’t add the proper code to your header to inform screen readers and bots.

If you format your heading tags properly, you won’t have to do it more than once. HTML headers typically follow your content when you copy and paste it elsewhere, which reduces the amount of time you have to spend on formatting. 

2. Create a meaningful hierarchy

People commonly misuse heading tags, choosing a header based on how it makes the text look. For example, adding H1s throughout their entire blog. This sends confusing messages to search engine bots, telling them that your page has multiple main topics. As a result, you likely won’t rank for the one you want.

It’s important to plan out your headings into logical sections and subsections and to use them in the right chronological order. For example, the header breakdown in this section looks like this:

H2 5 Heading Tag Best Practices
H3s

Add heading tags properly
Create a meaningful hierarchy
Break up text blocks

Once I finish the list, I’d go back to H2 for the next section’s header. If I wanted to break down points under one of the H3s, I’d use H4s.

3. Break up text blocks

No section should have more than 300 words without a header. Readers don’t want to spend time sifting through large blocks of text to find the information they need. Be sure to keep track of how much text you have in each section. If it’s getting too long, think about how you could use headers to break it up.

4. Keep headers concise

Keep headings between two and five words. Any longer and they can become a bit much. You want to get the core message across so readers can see what a section is about at a glance. Save the details for the paragraph sections.

5. Use keywords

Lastly, be mindful of the keywords you’re targeting and how you can effectively use them in the headers. You don’t want to use them in every header, but add them where it makes sense.

For example, below, the header includes “header tags” which is the main keyword. But I didn’t include header tags in every single heading as it’d be annoying and overkill.

Frequently asked questions about header tags

Here we’ll collect FAQs and answers about header tags.

Should I use the “Title” or “Heading 1” option in Google docs?

If you want the title to be tagged as an H1 when you move the content, use an H1. The “Title” heading option in Google Docs is for style not function. If you copy a title from Google Docs over to WordPress, it appears as normal paragraph text, whereas if you copy an H1 over, it shows up as an H1 visually and when you look at the code. On the other hand, if you’re not concerned about the HTML code being added, you can use whichever one you like.

Side note, typically there’s a place for the title in a CMS like WordPress so you don’t have to worry about tagging an H1 anyway. It takes care of it for you. You just worry about the H2s and beyond.

How many H1 tags are appropriate on a single page?

You should only have one H1 tag per page and it should be your page’s title (which should include the primary keyword).

Final takeaways on header tags

Header tags can help your content rank better on search engines while making it easier for human readers to understand (both help a brand build trust). Once you know the basics, it’s easy to add the headers as you go. Before long, you’ll be planning your headers before you even start writing.

Have any questions? Drop them below.