Test Your Website

Learn how to increase visitor action, reduce site confusion for new visitors, and get those new visitors returning back for more! Get BWI's Usability and Design Analysis.

Free Heading Tags

By Robert Campbell on Monday, January 11th, 2010 Print This Post
Previous: Time to Check that Footer
Next: Limit Text on the Home Page

What are heading tags? How can you get one for free? Well, heading tags are always free, but for your users, they are seen as one of the most valuable parts of your website design.

Heading tags inform users about page organization, structure, and help classify content. They give clues to what is to follow in the paragraph below. They enhance skimming, and most importantly, they help your visitors to complete the desired task quickly.

A Heading Example

Heading tags should be used as often as possible. A perfect example is to how I just used it in this paragraph. Before reading this paragraph readers know it’s an example of how heading tags work. It’s a basic example. Go crazy with heading tags, and treat them as if they were free.

Here is a example of ROI Communication that has used them for every paragraph.

headings

Are there too many headings used here? No way! It’s a perfect example to show how easy skimming can be made. Too much is when there is nothing in between the heading tags.

How To Code Heading Tags

Heading tags are commonly not used, abused, and misunderstood. When writing online think outline. Your content should be in outline format, even blog posts like this, and the easiest way to do this is by using heading tags. Reading this page the logo/title of this site is H1, my page title is H2, and my paragraph headers are H3 tags. It’s consistent throughout my site, which makes for easy skimmy, and also offers a consistent visual clues to content value.

Ranked #8 for top content on this site during the year 2009, here is my Heading Tag How To post. Are you using heading tags on your website? For me, after learning how to use them, they became one of the most important tools I ever had for building websites.

Get usability and design tips

Like this post? Get website tips delivered by email straight to you. Full feed articles are delivered, and are managed by Google's Feedburner service.

4 Comments - Post Yours Bookmark and Share

Get a detailed anaylysis of your website: BWI's Web Usability and Design Analysis

Just Posted! Testing Your Journal

Related

Category: Code, Usability & Design Tags: ,

4 Comments on “Free Heading Tags”

  1. aromatherapy says:

    Another case where they are used is in screen readers: people who can’t see the screen rely on these to read out the content audibly, and they use the tags rather than the styling to determine what’s a header.

  2. web design says:

    what should be size of headers in sites and blogs

  3. aromatherapy says:

    That they in the end may be rendered the same – or that it’s possible to render a paragraph the same way – is beside the point, making documents with a logical structure is good!

Leave a Comment

Subscribe without commenting

Return to top of page