June 17, 2004
Headers vs Headlines
While working out the particulars of how I want to design this site I came against a problem that's become pretty common for me in the age of standards-based design—should the top heading element (H1) be used for the website's header or the page's headline? When I look through other sites/blogs I'm seeing a couple of different trends.
H1 as Masthead
A common theme is for sites to markup the sites Header as an H1, identifying the sites name or masthead as the most important heading on the page (e.g. <h1><a href="siteurl.com">Site Name</a></h1>). Quite a few websites do this today:
That works well for the homepage, but what about when you get into content pages? Even though it is convenient for coding and includes, is this method really semantically correct for all of the pages in your site?
H1 as Blog Entry Title
With this method, the title for your entry is also your top-most heading (e.g. <h1>Entry Title</h1>). This practice seems to get a lot closer because it gives good indication (depending on how well the title is written) to the content on that page and also has many subscribers:
It seems like a good method for providing meaning to individual archive pages that have only one entry title on them, but what about indexes an homepages? Those can end up with 2-umpteen H1 headings, which effectively flattens the hierarchy of those pages, with no heading taking prominence. Honestly, I'm not sold on this method either.
Adding Meaning to the Page
So far, option B seems to be the best alternative, but is there an option C? I think there is.
Most every HTML page that is displayed on a computer screen has a singular identity, whether it be the site's homepage, site map, contact page, whatever. I think that identity is what should be conveyed in the top-most heading for each HTML page. If you are on a category index page of your webblog, the category index title should be the H1, not the many blog entry titles scrolling down the page (and thanks to the beauty of templates, we can mark up these titles according to there proper place in each page's hierarchy). Same goes for the Homepage, or any other page on the site. The H1 heading should set the expectation for what kind of content can be found on that page. There is a great discussion over this topic in SimpleBits "SimpleQuiz Site and Page Titles", and some solid conclusions in the end.
Search Engine Optimization
For bonus points, you can strategically use your heading tags to gain better page rank. According to Shari Thurow's Search Engine Visibility you can, and should, use the heading tags to promote keyword prominence. But most importantly, the page's heading should "accurately describe the contents of that page". This is recommended practice in tandem with the page title in the head of the HTML document. This method addresses usability issues with the headings as well, especially with mobile devices.
Conclusion
My decision is to use the H1 as Blog Entry Title for all of my individual archive pages in the weblog portion of my site, but think harder about the title I put in the H1 tag for pages on the rest of the site. I'll just have to use my best judgment to clearly indicate what content is on that page, and what users should expect to find there.
- Posted in:
- Web Design
Comments