H1 vs. H2 Heading Tags: Here's the Difference

H1 and H2 heading tags allow you to structure your content in a clear and engaging format. Heading tags are a basic HTML coding skill that enhances the appearance and readability of your article or blog post. As a writer, software developer or IT technician, understanding this coding function can help you produce higher quality content for your users. In this article, we cover what heading tags are, the differences between H1 and H2 tags, how both heading tags work with an example for your reference.

What are heading tags?

Heading tags are an HTML function that allows you to code the headings on a webpage. You can think of them as signposts that divide your written content into smaller sections. This makes it easier for your users to read and navigate lengthy articles and blogs.

Heading tags differentiate H1, your article's main heading, from H2 to H6 subheadings. You can assign a number between one and six depending on the importance and position a heading has in the overall structure of your writing. The code follows a hierarchy system, meaning that the heading size gets smaller from H1 to H6.

Heading tags are a common SEO term. They help communicate the key points in your content to a search engine so that they can direct internet users to the most relevant pieces of information. HTML headings and H tags are some other common synonyms for headings tags. Often people confuse them for other HTML functions, such as "header", "head" or "h". Thus, keep a close eye on the code you input when formatting headings on your web page. Any mistakes in your code can change the format and appearance of your content.

Related: Q&A: What Is Coding?

When to use H1 vs. H2 tags?

The following summarizes the major difference between H1 versus H2 heading tags:

H1 heading tag

An H1 tag specifies the primary heading on your webpage. This can be the main title of your webpage, article or blog post. Inputting this code in the back-end of your content management system will make the selected text display larger and more prominent than the rest of the text on your page.

H2 heading tag

An H2 tag marks the first sub-heading after your document's main heading. It defines the second-level headings on your webpage. Like an H1 tag, an H2 tag also appears larger than the rest of your main body text. However, H2 tags are always slightly smaller than your H1 tag, so that it does not compete with your main heading.

Keep in mind that heading tags don't stop at H2. To make your content more legible, you can add sub-points below your H2 tag with an H3 heading tag. Any sub-points below an H3 tag, you can specify with an H4 tag. This sequence can continue all the way to H6 tags, however, it's quite rare you'll write content deep enough to need heading tags above H4.

Related: Learning How To Code

Benefits of using heading tags

Heading tags, such as H1 and H2 elements, bring clarity to your written content and boost your webpage's ranking. Here's an explanation of the major benefits of using heading tags:

Improves content structure

Heading tags provide structure to your content, which helps guide readers through an article. It introduces what a section or paragraph is about so that users can scan through your webpage to find information that meets their interests. The large and bold style of H1 and H2 tags allows readers to focus on your writing for extended periods of time. Without them, your webpage may appear wordy and complex.

Optimizes the quality of your content

While heading tags don't directly impact your SEO performance, search engines usually prefer content that is easy to read. Using headers to simplify lengthy articles invites readers to spend more time reading your content, instead of bouncing from one website to another. Search engines can detect this behavior as it's goal is to direct users to quality content. Thus, search engines tend to rank content with a low bounce rate much more highly.

How do H1 heading tags work?

Here are some easy steps on how to code H1 heading tags on your webpage:

1. Outline your content

Before you write your content for your webpage, create an outline, detailing the major points you want to cover in your article. This is an important step to help you determine the key sections your content will contain, especially the headings they will fall under.

2. Determine the primary heading

Now that you have prepared a simple plan for your article, create a title that summarizes the purpose of your writing. Think about an engaging name that will entice people to click on your web page from a search engine results page. Ideally, you should keep your heading concise at 12 words or fewer. At a later stage, you will use your H1 heading tag on this title.

3. Implement your targeted keywords

In the title of your webpage or blog post, it's essential to include your targeted keywords to improve your SEO ranking. However, don't pack your heading with too many keywords, because search engines will assume that you are trying to manipulate them. Thus, make sure your keywords sound natural in the flow of your argument.

4. Insert the H1 heading tag

In code view, insert the H1 tag around your primary heading using the template below:

Remember to add the H1 heading tags in front and behind your title text.

Related: How to Write Code in 6 Steps

5. Preview your content

Switch off code view to test whether you have inserted the heading tag correctly. It should appear larger than your main body text. If this is not the case, go back into code view to check if you have made any coding mistakes. Often people forget to close the code with another H1 tag, misuse the forward-slash or mistype an element.

How do h2 heading tags work?

If your content contains more than 300 words, it's good practice to use H2 subheadings to clean up the structure of your webpage. Here are some steps to consider when using H2 tags:

1. Refer to your outline

Your article outline should highlight the major topics your content will cover. These topics form the subheadings of your writing; and therefore, inform your H2 tags. Typically, you should break down sections with over three paragraphs into smaller sections under subheadings. This way, readers can follow your content with ease.

2. Use actionable phrases

Your subheadings should summarize the content in the section below. This helps readers quickly scan through your webpage to get an overview of what it's about. H2 subheadings also act as a navigational device, whereby readers can quickly jump to sections that are most relevant for them.

3. Insert the H2 tag

In code view, insert the H2 tag around your subheadings using the template below:

Remember to add the H2 heading tags in front and behind your title text.

4. Preview your content

Preview your subheadings in article view to verify that you have inserted your H2 tags correctly. They should appear larger than your main body text, but slightly smaller than your H1 heading tag. If you notice any discrepancies, recheck your code.

Related: 8 Essential HTML Interview Questions and Answers

Other subheadings

While H1 is your primary heading tag, there are five levels of subheadings, from H2 all the way up to H6, that you can use to structure your content. Usually, you will use higher-order heading tags to highlight the most important pieces of information in your text. That's why, you can expect to use H4, H5, and H6 tags only when your content is very long. The following describes how you can use HTML coding to specify different headings:

Here's how the code will appear on your published webpage:

Heading tag example

Here's an example of an article outline to demonstrate how you can use different headings tags: