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

Note: If your page is coded using HTML5 structure and uses the <section> and </section> tags in the body of your document the HTML5 specification as it stands July 2013 reads:

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

4.4 Sections – HTML5

Also note that, just because the theme/template of your site or blog uses the HTML5 DOCTYPE declaration that doesn’t mean it is actually following the structure of a HTML5 document.

The heading order still has to make sense within the HTML5 element you are using if you are using more than one heading within the opening and closing tags of that element.

Below is an image showing the heading structure for documents written using (X)HTML standards prior to HTML5. It can still be used as a guide for headings within your section, article, etc. when using HTML5.

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 - 2024 Web Page Mistakes. All rights reserved.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

This entry was last modified July 15, 2013 at 11:14 pm 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 skip to the end and leave a response. Pinging is currently not allowed.