Heading Structure – Heading Tag

Heading Tag examples

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.

Example of heading structure

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.

Example of how heading tags are nested

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.

What's next?

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

12 Responses to Heading Structure – Heading Tag

  1. Web Hosting UK Says:

    A big mistake in SEO , when you try to get quality content is ignoring the use of heading tags.If you are writing a blog or a website post, you must learn to use the HTML tags that search engines look at. Inside the tags that you use make sure that you are using your keywords.

  2. Sandy Says:

    Great! Thanks for those information. I really need to do a make over on my page, it is really a mess. Now I know what to do with those titles and subs.

Heading Structure – Heading Tag Was Mentioned Here:

  1. Website Design Mistakes
  2. Internet Marketing Tips » Blog Archive » Why Should I Use Heading Tags?
  3. Heading Hierarchy
  4. H1 & H2 tags and no followlinks
  5. H1 Tag Problem!
  6. Heading Tags Keyword Selection
  7. Is Your Blog Accessible?
  8. Use HTML Coding for On-Page SEO
  9. Better Usability Through Consistent Design
  10. Use tag for web site

Join the Conversation by Leaving a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> within your comment.

By leaving a comment, you acknowledge that you have read our terms of use.