Building a website with HTML code
Building a website with HTML code

What are HTML headings on a website and how should they be used?

Whether you are hand coding a website from scratch, or you're using a tool such as Wordpress Wix or Squarespace, you may have come across the terms 'HTML headings', 'heading tags', 'h1', etc. But what are they, and how should they be used to help visitors find content on your website and search engines rank your website?

What does a heading tag look like when viewing the HTML code?

When viewing the HTML code of a website, you will see heading tags that look like this:

<h1>Acme Travel - Guided tours of the Cotswolds</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere aliquam facilisis. Pellentesque non dictum est, nec vulputate dui. Nulla sollicitudin turpis sit amet leo sollicitudin lacinia.</p>

You start a heading with the opening heading tag (<h1> in the above example). The heading itself follows, and then the closing heading tag (</h1> in the above example) finishes the heading.

Where should HTML headings be used?

HTML headings are typically used to help organise a website's content. An h1 tag should be placed at the top of each article, then h2, h3, h4, h5, and h6 tags should be used at the top of sections, and subsections on a page.

How many different HTML heading tags are there?

There are six heading tags. h1, h2, h3, h4, h5 and h6.

It is important to have one unique h1 tag on a page and at least a couple of h2 tags. For more details vist the "Can I use HTML headings how I like, or is there a way they should be used?" section on this page.

What is the purpose of HTML headings?

The purpose of HTML heading tags is to present your web page content in sections, which can be easily browsed by users. Headings should also be used to help search engines index a website more easily.

Can I use HTML headings how I like, or is there a way they should be used?

When creating your own website, it is important to follow these HTML heading guidelines in order to make sure your content is easy to navigate and find and that the different heading types are used correctly. Here are 5 important things to know about using HTML headings.

  • You should only use one h1 tag on a page. This is the headline for the entire article/page and it should accurately describe the page content. For example, on your homepage, don't set the h1 to be "Welcome to our website". That means nothing to a search engine and using a heading like that doesn't make use os a really important way of telling search engines about the content of the page. Instead, use something like "Acme Travel Guides - Showing you the hidden parts of the Cotswolds".
  • The next heading level is h2. You can have multiple h2 tags on a page and they should be used to separate major sections of the web page.
  • If an h2 section is very long then you may want to split the section into sub-sections. Each of these sub-sections can have an h3 heading to introduce what's coming. You can have multiple h3 headings within an h2 section.
  • Always make sure the headings are presented in order. What we mean by that is that the h1 comes first, then one or more h2 tags. Within those h2 sections you can add h3 headings but when the parent h2 section finishes another h2 section starts. Don't skip a heading level - don't go from using h1 to using an h3 for instance.
  • And finally, if you find you are using more than 10 h2 tags, that may be a sign that the page content is too long and becoming unfocussed. At that point you make want to look at splitting the page into two, more focussed, pages.

Tips for creating great HTML headings for your website

Only use one h1 tag on each page, and try to make sure that the h1 is unique across the website. If you have the same h1 tag on more than one page then it's an indication that your content isn't well organised and pages may be competing for the same keywords and phrases in the search engines. This is called keyword cannibalisation and it occurs when you have too many identical or similar keywords spread throughout the content on your website. This means that a search engine like Google can't discern which content to rank higher and can result in higher rankings being given to to the web page you don't mean to prioritise.

Be sure to use descriptive and keyword-rich titles for your headings. Start each section of content with a heading which accurately describes the upcoming text for both visitors to the website and search engines crawling the content. This will help improve your website's SEO ranking and also help visitors navigate the page content.

Ensure your pages have at least a couple of h2 tags. If you don't split your content into easily readable sections it could result in visitors leaving the page without reading all of the content you added to the page.

Split h2 sections using h3 tags if they are too long.

Don't worry if you do not use h4, h5 and h6 tags. These are less important than h1, h2 and h3 tags and are seldom used in modern, well designed websites.