Headings

The ability to write an effective heading is an important part of crafting a web page, as they provide structure and organisation, which allows users and search engines to better understand the page.

The following guide will take you through the basics of heading elements, as well as some more advanced tips for writing headings for users and helping SEO.


 

What Is a Heading?

Headings are titles and subtitles within the copy of a page used to guide users and search engines by indicating what a page or section of page is going to be about.

They provide a hierarchical overview and communicate how content is organised. They help signpost readers through a page, particularly when scanning content.

Headings make the page easier to digest and are important for accessibility.

Headings can be indicated in HTML using six levels of heading elements (sometimes referred to as ‘heading tags’) from most to least important. The h1 is the most important main heading of the page, while h6 is the least important. They can be styled using CSS to stand out from usual text.

Code Example

Heading elements can be used in the body of a document and look like this in HTML:

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6


What Are the Different Types of Heading Tags?

Headings operate by a distinct hierarchy, indicated with HTML heading tags.

These include Heading 1 (h1), Heading 2 (h2) and so on up to Heading 6 (h6), with h1’s being the most important and h6 the least important. Here are the primary uses of each heading tag:

  • h1 : Each page should have an h1. Generally speaking, they should be very similar to the page title, telling the user the overarching topic or purpose of the page.
  • h2 : These should indicate what each section of the page is about.
  • h3 : These are used to show the user what different sub-sections are about.
  • h4-h6 : These are rarely used except in more lengthy or technical content where a greater depth of sub-sections is required.

As well as being the first heading on the page, the h1 will also be the largest in size, with headings getting smaller and closer in size to on-page text the further down the hierarchy.


How Can You View Headings?

There’s a number of ways to view them, and the tool of choice will depend on whether you want to view just a single URL individually or a website in bulk.

Browser

A page’s h1 can usually be found near the top of the page, below the site’s main nav.

View Heading in a browser

View HTML Source

Headings can also be viewed in HTML using a browser. In Chrome, you can right click on the web page and choose ‘View Page Source’ to view the raw HTML, or you can right click and ‘Inspect’ the relevant element to view the rendered HTML.

View headings in Rendered HTML

The rendered HTML is after JavaScript has run. Google can generally render web pages, and see the rendered HTML.

CMS

Headings can be viewed within a CMS, such as WordPress. Usually the page name is used as the h1 in WordPress for example, but it may depend on the Theme.

H1 Heading in WordPress

Other heading tags can be seen by switching to HTML within the editor.

SEO Spider

Headings can also be viewed and analysed in bulk in an SEO crawler, such as our own SEO Spider software.

H1s and h2s in 中国体育平台

Crawling a website with the SEO Spider and viewing the ‘H1’ or ‘H2’ tabs will display all crawled pages, their respective headings and identify common issues.


Why Are Headings Important?

Outside of the benefits of controlling the styling of heading elements using CSS, there are other benefits to using headings.

1. Headings Give a Page Structure & Break Up Text

This can be particularly helpful for long articles where the user is looking for a specific piece of information.

2. Headings Help Search Engines & SEO

Google uses headings to improve its understanding of pages, such as their main topic and structure.

While ranking signals are hotly debated, h1’s are generally considered a must have, and the text contained within it may be weighted higher in search engine algorithms over normal on-page text.

3. Headings Improve User Experience

A better user experience tends to mean that users will find it easier to consume the content, which gives the page more chance of completing whatever its intended goal is — commercial or otherwise.

4. Headings Increase Accessibility

They help visually impaired users and assistive technology such as screen readers rely on them to understand the structure of pages which they can read out loud.


How Do You Write a Great Heading?

These best practices will help you write better headings for users and search engines.

Focus On Structure

Headings should be logically structured and ordered in the content of the page for the user.

The W3C advise to –

“Nest headings by their rank (or level). The most important heading has the rank 1 (h1), the least important heading rank 6 (h6). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.”

While specifications allow it, heading tags ideally wouldn’t be used in elements such as the main navigation, when list menus can be used.

Ensure They Are Helpful

Think about the user and the content provided and ensure headings are accurate and useful in signposting relevant sections of the page.

A user should be able to scan them quickly to get an understanding of the page and find a relevant section.

Be consistent in terms of format, layout, grammar and tone of voice.

Be Concise & Clear

Avoid making headings overly long or stuffing them with keywords.

There isn’t a specific length a heading should be, but longer headings are much harder to read at a glance.

Instead, try to make them as simple as possible to allow users to scan the document and avoid confusion.

Include Relevant Keywords

It’s a good idea to include relevant keywords in your headings – aside from providing context to Google as to what is on the page, this will be helpful to users as well.

As ever, it’s important to be careful with your keywords; you don’t want to overdo it and make the heading unnatural. Your primary aim should be to make the best possible experience for the user, after which you can make minor adjustments and better optimise headings for Google.

Make Them Unique

Much like page titles and meta descriptions, every page should have a unique h1.

Using the same page heading across multiple pages is not useful for users and may confuse search engines about which page to rank for a specific query.

Avoid Multiple h1 Tags

HTML5 introduced the concept of multiple h1 headings per page and Google has said that multiple h1 tags are not a problem .

However, there are issues with this approach in terms of usability browsers didn’t adopt it and support has subsequently been questioned and dropped in later specifications.

Therefore, as best practice it’s recommended to use the classical approach and have only one h1 per page as the main topic (this is also recommended in Bing’s guidelines ).

You can have multiple h2 to h6 tags as sub-headings.

Optimise For Featured Snippets

Headings can help a page to target relevant featured snippets (a section of text taken from a page and displayed at the top of the SERP for certain keywords):

Targeting featured snippets can be an effective way of increasing your site’s visibility. One way to do this is to use a long-tail question keyword as your page’s heading, then immediately answer it in the following text.

Another popular way to optimise your headings for featured snippets is to use smaller headings (e.g. h3 onwards) to outline lists. Depending on the keyword, Google will use lists in featured snippets to answer certain keywords:


Do All Pages Need an h1?

Ideally all templates and pages across a website would be logically structured and styled, which includes the use of headings.

Key pages on a website should have an h1, but it’s not a major issue if some pages, particularly those that are not important don’t have them.

The benefits and cost should be considered for any future improvements alongside other website changes.


How Do Headings Differ to The Page Title?

The page title element is distinct to headings, but it can be confused as the h1 is the main visible title of a page.

The page title, sometimes referred to as a ‘title tag’ or ‘SEO title’ is an HTML element in the head of the web page, which is not visible on the page to a user.

It can be seen at the top of a browser and can be used as the title of search engine result snippets by the search engines. They describe the topic and purpose of a page. You can read about page titles in our Learn SEO guide.

As good practice, your h1 heading should include the same topic and target the same key phrase as the page title, but it doesn’t have to match. They should each be crafted with the user in mind.


What Tools Can Help You Improve Headings?

A mixture of keyword research tools, SEO crawlers and plugins should help you craft the perfect heading.

Keyword Research

Use the following tools to perform keyword research around relevant topics and keywords for a page. Your headings should align with the intent and keyword targeting of the page and its title element.

SEO Spider

SEO crawlers can be super helpful when analysing headings across a website in bulk.

Our Screaming Frog SEO Spider can help you view and analyse your headings. Download the tool and crawl 500 URLs for free (or more with a licence ) and click on the ‘h1’ or ‘h2’ tabs.

H1s and h2s in 中国体育平台

This will display all pages, their h1s and h2s, and it will help you identify common issues such as missing, duplicate, long or multiple headings that can be optimised.

Plugins

There are various SEO plugins you can use for Firefox and Chrome, that display the heading or heading structure of a page, which can be easier than having to inspect the HTML.

Headings in a Chrome SEO plugin

Final Thoughts

Although headings may only have a fairly small impact on ranking, they help Google’s algorithms to better understand your website and are integral to providing an informative and intuitive user experience for everyone.

Following the advice outlined in this guide will help both users and search engines to better navigate and comprehend your site.