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.
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:
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.
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.
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.
Discussion
February 16th, 2009 at 2:16 PM
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.
February 16th, 2009 at 8:31 PM
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.
February 17th, 2009 at 12:52 AM
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!
February 17th, 2009 at 3:42 AM
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.
February 23rd, 2009 at 11:34 PM
This is a simple but effective part of on-site optimization, and all these little tweaks add up to better rankings.
June 30th, 2009 at 8:53 AM
Great post Zach. This article will be a good reference for all future web projects.
July 7th, 2009 at 10:53 AM
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? =-.
November 12th, 2009 at 9:08 AM
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 =-.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.