Heading Structure – Heading Tag
Web Page Mistakes

Heading structure is important not only to present a clear structure to the web page but also in consideration of those using text readers and the search engines.

First let’s go over what Heading tags are.

Heading Tags

Heading tags are used to define the headings in your page. There are 6 available, h1 set of heading tags being the biggest and boldest and the h6 set being the smallest.

You should use them as you would if you were writing a book or article and not to highlight text in your page.

The size, colour and other presentation attributes of these tags can be changed in your stylesheet just as you would change your text.

When you use the heading tag it will automatically add space above and below the text within the heading tags and automatically start your text on the next available line.

Also consider:

• those who use text readers to read your site will become confused if you do not use heading tags in descending order as they were intended.
• All browsers support heading tags and each displays the headings in slightly different sizes.
• A visitor may have changed the default fonts of their browser and chosen to over ride your stylesheet so the sizes and font may different than you intended.

Now onto building your Heading Structure.

Heading Structure

1. Heading Tags Used for Headings Only
   • Check that heading tags have only been used for headings and not as a way to format other content.
   • If you did, remove the headings tags from areas that are not actual headings and use classes to format these areas.
2. Check the structure of your headings.
   • First heading of the page is heading 1
   • Subsequent headings are in decending order
   • Sub-subsequent headings are in decending order

Below is an example of how the heading tags are related to each other. Notice that as the heading tag number is increased, it becomes an additional sub level of the heading above it.

If you download and install the Web Assessibility toolbar it has a Headings tool and a Heading Structure tool under the Structure section where you can check:

• where you have used heading tags
• the heading structure of the page

Heading Structure and Search Engine Optimization

Heading structure also plays an important part of search engine optimization.

The search engine spider checks for heading tags as it looks at your web page. Each search engine spider will prioritize the importance of the headings in a different way.

Heading structure and search engine optimization article.

Heading Structure and Readibility

When proper heading structure is implimented it adds to the readability of the web page.

People who surf the net tend to skim the information on a web page looking for points of interest to them.

If a web page uses heading tags properly to create a proper heading structure the visitor will be able to see the highlights or topics of the page quickly and focus on the points they are interested in. If the topics covered interest them they will either just read the particular section they are interested in or take the time to read the whole web page or article.

As you can see, the heading structure of a web page is important to the readability for the average visitor and those using text editors and search engines. A properly structured heading system is one of those things you have to spend time thinking about when designing your web page.

Correct the web page mistake of using heading tags incorrectly and improve your website’s readability and make it search engine friendly.

Heading Structure and Accessibility

Have a look at the following video to learn how heading structure is used by those using screen readers.

“An Introduction to Screen Readers”

Importance of HTML Headings for Accessibility – from a blind person’s point of view.

Copyright © 2005 - 2008 Web Page Mistakes. All rights reserved.

This entry was posted on Sunday, November 20th, 2005 at 9:53 am and is filed under Legibility, Site Design, Web Page Layout . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.