Resources

A beginner’s guide to HTML headings

By
15 min read

Introduction

HTML headings? You’ve likely heard of them but what actually are they, what is their purpose and how do you write them?

In traditional print content, headings are phrases at the beginning of a section that explain what it’s about. Well, it’s much the same when it comes to headings on the World Wide Web, too. Correct use of HTML headings on a web page provides structure and a quick run-down of what a webpage is about, helping both search engine bots and humans understand your content.

So, if you want to improve your SEO efforts, HTML headings are a good place to start. But getting your head around even the most basic HTML can be difficult. Luckily for you, we’ve put together this handy beginner’s guide to HTML headings. In this guide, we’ll learn what HTML headings are, how they benefit SEO and how to write HTML heading tags correctly.

Points we’ll touch on:

What is HTML?

HTML, or Hypertext Markup Language, is the basic building block of most web pages – a system for telling browsers how to structure content. For example, the language can be used to specify which part of a page is the title, which is a heading, a list, an image and so on. It can also be used to hyperlink a word, embed an image, bold a font and so much more.

It is one of three essential components that web designers use to create websites, alongside Cascading Style Sheets (CSS) and Javascript (JS). In web design, HTML acts as the simple base upon which to build CSS and JS. While CSS allows you to customise your web page with colour, fonts, styling and layouts, JS allows you to add dynamic functionality like pop-ups and sliders.

What are HTML headings?

Now for the good stuff…

HTML headings are titles or subtitles that you want to display on a webpage. These heading tags are used to differentiate the headings (<h1>) and sub-headings (<h2>-<h6>) of a page from the rest of the content.

HTML defines six levels of headings, including H1, H2, H3, H4, H5, and H6. The most important heading is the H1, while the least important is the H6. The heading tags from H1 to H6 form a top-down hierarchy, which means that if you skip any of the tags, the structure will be broken. This is bad news for SEO.

What are heading tags?

When talking about headings, people often refer to “heading tags”. To avoid any confusion, heading tags are the tags added to a heading to signal what level of heading it should be.

The heading tags from H1 to H6 form a top-down hierarchy, which means that if you skip any of the tags, the structure will be broken. This is bad news for SEO.

For example, if your site is introduced with a H1 tag then you skip the H2 and go straight to a H3 tag, you’ll have broken the top-down hierarchy and the heading structure won’t be SEO-friendly.

Writing heading tags is fairly simple when you know how. Take the above heading, for example. If you looked up the HTML heading tag for the H2, “What are heading tags?”, it would look something like this:

Here, the <h2> is the opening tag for the H2 heading, while the </h2> is the closing heading tag.

What about header tags?

It’s also critical not to confuse heading tags with header tags. Unlike heading tags, header tags refer to the <head> section of your HTML code.

Header tags can be used to define the header of a document or a section of your content. Most often, they’re used to represent introductory content and, while they may contain some heading elements, they can also include a logo, a search form, an author name, and many other elements.

Why are HTML heading tags needed for SEO?

HTML heading tags remain a strong signal for SEO. This means that implementing heading tags correctly could improve your website’s organic performance. There are two main reasons why HTML headings are super important for SEO:

  1. To structure the page and improve readability
  2. To highlight relevant keywords

Improving readability

Adding headings and subheadings to a page divides the content into easy-to-scan blocks that both readers and bots can consume.

Like headings in print content, heading tags are used to title or introduce the content below them. As already mentioned, HTML tags follow a hierarchy, from <h1> to <h6>:

  • H1 tags – used to denote the most important text, such as the overall topic or title
  • H2 and H3 tags – usually used as sub-headings
  • H4, H5 and H6 tags – provide further structure within those subsections

HTML heading tags are incredibly useful for both users and search engines. For users, headings give them a preview of the content they’re about to read. For search engines, such as Google, a heading is a strong signal that tells them the topic of a specific section.

So, ultimately, heading tags are important for SEO because they help Google understand your content, while also making your web pages more user-friendly.

Highlight relevant keywords

Search engine bots see the text used within HTML heading tags as more valuable compared with the rest of the text on the page. Therefore, search engines weigh the words included in the heading tags more highly when they’re trying to determine a page’s relevancy to users’ search queries. In fact, a page’s H1 tag is one of the most impactful places you can use a keyword.

For example, if the main keyword you want to target is “HTML headings”, you would use that in your H1 tags. Then, you would include any semantically related keywords throughout the rest of your content, including your subheadings.

Like headings in print content, heading tags are used to title or introduce the content below them. As already mentioned, HTML tags follow a hierarchy, from <h1> to <h6>:

  • H1 tags – used to denote the most important text, such as the overall topic or title
  • H2 and H3 tags – usually used as sub-headings
  • H4, H5 and H6 tags – provide further structure within those subsections

HTML heading tags are incredibly useful for both users and search engines. For users, headings give them a preview of the content they’re about to read. For search engines, such as Google, a heading is a strong signal that tells them the topic of a specific section.

So, ultimately, heading tags are important for SEO because they help Google understand your content, while also making your web pages more user-friendly.

What are HTML headings?

What is an H1 tag?

So, as mentioned above, H1 tags are the most important HTML heading. Why? Essentially, it acts as the page title. The H1 tag is a critical ranking factor for search engines, being considered by bots to determine what a page is all about.

Also, given that H1-tagged content tends to appear larger on a webpage, the H1 tag is typically the very first page element seen by readers, making it a determiner of whether they keep on reading or go back to the search results page (SERP).

What is the difference between a heading and a subheading?

While a heading acts as the title of a piece of content, a subheading acts as an extension of that heading.

The purpose of the heading, or H1 tag, is to grab the attention of both humans and search engine bots. Humans read a heading to determine whether the content is relevant to them, while bots read a heading to find out whether it is relevant to any search queries.

By contrast, the subheading is placed right below the heading and drives the reader to continue reading through the rest of the content.

SEO H1 tags best practices

Considering that H1 tags are clearly so important, it’s crucial that you know how to properly optimise them for SEO. To do so, follow our SEO H1 tags best practices below:

  • Use H1 tags for page titles
  • Use title case for H1s
  • Match H1s to title tags
  • Only use one H1 tag per page
  • Use an H1 tag on every important page
  • Keep H1 tags short
  • Include your target keyword
  • Make H1 tags compelling

SEO H1 tags best practices

Considering that H1 tags are clearly so important, it’s crucial that you know how to properly optimise them for SEO. To do so, follow our SEO H1 tags best practices below:

  • Use H1 tags for page titles
  • Use title case for H1s
  • Match H1s to title tags
  • Only use one H1 tag per page
  • Use an H1 tag on every important page
  • Keep H1 tags short
  • Include your target keyword
  • Make H1 tags compelling

What are H2 tags?

Whereas your H1 tag is used for your page’s main heading, your key points are wrapped up in subheadings known as H2s. In other words, your <h2> tag defines the second-level heading on your webpage.

What are H3 tags?

However, subheadings don’t just stop at H2s. Any sub-points below your <h2> tags should use <h3> heading tags, while sub-points below H3s should use the <h4> heading tag, and so on.

This sequence can continue all the way to <h6> tags, which are the least important in the heading tag hierarchy.

How to write HTML headings

Overall, writing HTML headings is about organising your content in a way that makes it easier for readers to scan and understand. Therefore, headings should be used hierarchically, starting with your H1 tag and working your way down to H2, H3 and beyond.

If you’re just writing a short piece of content, you might only have a single H1 tag and a couple of H2 tags. But for longer, more complex content, you might require headings through to H6 to make your content more readable.

When structuring your headings, focus on breaking down the topic into clear, logical sections – don’t just create headings for the purpose of SEO. Your H1 should introduce the topic, while your H2 subheadings should break that topic down into key sections. Any following headings should then add extra detail.

The different HTML heading levels should be written as follows:

This code would result in:

For example, if you were writing a content piece about the benefits of owning a dog, your heading structure might look a little like this:

Takeaways

So, what do you need to take away from our beginner’s guide to HTML headings?

First, HTML headings are still an important ranking factor for SEO. So, using them properly will help improve the organic ranking performance of your website.

Finally, when writing HTML headings, structure them in a logical way that will help both readers and search engine bots make sense of your content.

Find out more about our SEO services and get in touch today. Or, to learn more about digital marketing, visit our blog.

Second, HTML heading tags also improve user experience by making your content easier to read and understand.

Third, HTML heading tags should be used hierarchically, with H1 at the highest level and H6 at the lowest. H1 tags are most important and should include your target keyword.

Let’s get started

Want to know more?
Contact us today to
start achieving unprecedented results.

This field is for validation purposes and should be left unchanged.