Using Headings Properly

Published: | 1 Comment

Within your web pages the correct use of headings is very important for two main reasons:

  1. To signpost your content for your users.
  2. To help with search engine optimization (SEO).

Signposting Your Content

Visitors to your website will seldom read entire pages from top to bottom like they would a book. Usability studies have shown that people’s eyes tend to dart around the pages, taking in items that grab their attention.

Headings on your pages are important for that reason. They can reassure your visitors that they are where they expect to be, and well written headings will enable visitors to quickly find the parts of your content that they want to read.

Search Engine Optimization

Search engines such as Google or Bing will attempt to analyse your pages to work out what they contain and therefore how to categorize them within the search listings.

The headings within your pages carry more weight than the rest of the content, and so using a page’s keywords within headings can boost the page ranking within search engines.

Headings – Best Practices

Here are some hints and tips that will help you get the best from your page headings.

Use the HTML heading tags

When placing headings in your pages you should always use the correct HTML tags – eg. <h1>, <h2> etc.

Simply using plain text that is larger and/or bolder may successfully signpost your content for sighted users, but the search engines will not recognise this text as a heading and search engine rankings may not be as good as you would expect.

Structure headings correctly

The numbering in the HTML heading tags indicates the hierarchy of the headings – <h1> being the top level, down to the seldom used <h6> which is the lowest possible level.

There should only ever be one <h1> tag on any page. Typically this would describe the purpose of the page, and would mirror the page title.

It is important to nest the headings correctly – much as you would when writing a document.

For example:

<h1>...
  <h2>...
  <h2>...
    <h3>...
    <h3>...
  <h2>...

This is correct

<h1>...
    <h3>...
  <h2>...
  <h2>...
      <h4>...
    <h3>...

This is not correct

If the order of your page components dictates it, it is acceptable to have one or two <h2> elements before the <h1> top level heading

Consider screen reader users

Blind users who rely on screen readers or braille devices will also thank you for using meaningful headings correctly in your pages. Screen readers often offer functionality that lists the page headings for the user and allows them to jump straight to the correct sections. In this way the headings become additional navigation methods.

As well as using headings to signpost your content, it is useful for blind users if you use headings to signpost other parts of your pages too – for example the main navigation links, or a search or contact form. Typically, page designs would not incorporate these headings on a page, but it is possible to use a stylesheet technique to hide them from sighted users whilst making them available for screen readers. Read more about this technique on my post entitled ‘Text for Screen Readers Only’.

Related Posts

These other posts may be of interest.

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

One Response to “Using Headings Properly”

  1. From: WP Themes on February 3rd, 2010 at 5:13 am

    Good brief and this mail helped me alot in my college assignement. Thanks you as your information.

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.





Previous post:

Next post: