Five Minute Upgrade – Header Hierarchy

Headings can be tricky business. In a continuation of our Five Minute Upgrade series, today we’ll look at the effective use of heading tag family.

With a quick overhaul to your site’s heading hierarchy, you’ll see an increase of both usability and search engine rankings.

Size Doesn’t Matter

When I first started learning HTML, it seemed logical to use the heading tags when I wanted big fonts. This is a common novice mistake. For a web designer just starting out, the proper usages of H1-H6 tags may not be apparent past appearance.

These tags should not be used simply because they provide quick variants in font sizes; that’s a job we’ll leave to CSS. The average viewer may not even realize which tags are being used under the hood. This lets the designer focus on making the code relevant to the content it’s displaying.

Rank your Headings

Headings have a much higher calling in web site semantics. They help point out the hierarchy of a page’s content. Let’s apply this idea of hierarchy to this sample site mock up:

Sample Website

How would you arrange the headings in the site above? What is the most important element for a page? Which are secondary to other pieces?

Here’s one interpretation for heading arrangement using the above content list.

Marked Up Website

There isn’t always a blanket solution to arranging site headings. It really comes down to which content you want to put focus on, and which can fall into the background.


Make an Outline

When used logically, the header hierarchy should form an outline.

Need help visualizing? The W3C HTML validator has an incredibly useful feature that compiles an outline based on header tag hierarchy. Here’s an example using Smashing Magazine’s front page.

W3C’s explanation for outlines offered at the bottom is dead on:

Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.

A downside of the W3C outline service is that it only works on HTML valid documents. Fortunately, there’s an alternative for everyone who doesn’t live or die by page validation with the Web Developer Toolbar for Firefox by Chris Pederick. In the toolbar, go into Information>View Document Outline to get an outline that doesn’t care if you included an alt tag or not.

Digg That Hierarchy

Digg is an excellent examples of well arranged header hierarchy keeping a page simple. No need to go overboard. Even with enormous amounts of content, Digg’s front page only goes three levels deep.

Digg Header Heirarchy

Reap the Rewards

Heading arrangement is not just idealistic good practice. It has some very real benefits, especially when it comes to search engine optimization.

Search engines will be able to crawl and index your pages far more effectively if the tags are helping to indicate the important parts. With some smart arrangement of keywords, you could increase search results for any number of topics.

Posted Sunday, February 15th, 2009 · Back to Top

SPONSOR

Add Comment

9 Comments 4 Mentions

  1. Raymond Selda Author Editor

    Very useful post Zach. Sometimes I get stumped on what headings to use in a document. Your article is going to be a good reference. Thanks.

    ·

  2. Jermayn Author Editor

    Good topic.

    Personally I prefer using h1 for the page title on interior pages and the website name as h2 and I would use the links and search header as h4 as they are not as important as the sub title.

    ·

  3. Zoe Author Editor

    Great article!
    Heading hierarchy should be common sense, but it’s stuff that needs to be said. This is something many of seem to lose track of in the big picture.. I’ll now be going back through some old projects and cleaning them up, thanks for the Web Developer Toolbar tip!

    ·

  4. hannes Author Editor

    fyi
    same topic discussed here:
    http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/

    i think i go with #47:
    January 28, 2009 by Ben Buchanan

    My current setup where possible is…

    1. Only one h1 per page – it should reflect the one overal topic of the page
    2. On the site homepage the site title is the h1
    3. On a section/index page the site title becomes a strong, and the section name is h1
    4. On a content page the post/article title is h1 and the site and section title are both strong.

    That way there should only be only one page per site with a particular h1. Together with a complementary title scheme you should end up with a fairly natural site heirarchy and avoid multiple pages all using the same h1 contents (which to my mind is misleading).

    When that system isn’t available you generally just have to live with the site title in h1, page title in h2 and heirarchy goes from there.

    ·

  5. Clue Web Design Author Editor

    This is a simple but effective part of on-site optimization, and all these little tweaks add up to better rankings.

    ·

  6. Webbo Author Editor

    Great post Zach. This article will be a good reference for all future web projects.

    ·

  7. Trisha Cupra Author Editor

    Excellent article. I’ve linked to it in a post that you inspired me to write on the subject. I like your illustrations of the principles. In my post I show a newspaper’s front page plus a website and I point out how the headings get smaller as they get less important.
    .-= Trisha Cupra´s last blog ..Are Your Headings heading for Disaster? =-.

    ·

  8. Sava Author Editor

    All my sites have the same schema: h1 for site title, h2 for article titles, h3 for important stuff within the articles, h4 for the sidebar
    .-= Sava´s last blog ..British Airways Gets You Ready For The Holidays =-.

    ·

  9. Truck Accident Lawyer Lancaster Author Editor

    P.S. Please let me know If its Alright With you.

    ·

 

Build Internet by One Mighty Roar. Since 2008.