Using Headings Properly
Published: | 1 Comment
Reading Time: 2 minutesWithin your web pages the correct use of headings is very important for two main reasons:
- To signpost your content for your users.
- 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)
One Response to “Using Headings Properly”
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Navigation – Where Are You?
Next post: Key Differences Between WCAG1.0 and WCAG2.0
Good brief and this mail helped me alot in my college assignement. Thanks you as your information.