My tweet last week sparked a large discussion , and so I decided to try and find some opinions, and hopefully definitive answers to the H1 debate.
The debate seems to polarise the web community, with many web designers using differing methods. Some tag the logo as an H1 element whilst others using the H1 for the page title.
Twitter Opinions
During the weekend, I spent a few hours with serial Twitter developer Ollie Parsley and we created www.h1debate.com. The website was massively more popular than either of us imagined which in the space of a week, had been featured on over 20 websites, visited over 3,000 times and has had over 300 unique votes on the subject.
As of 6th Feb 2009, the ratio is split 70/30, with 70% of people preferring to use the H1 tag for the main heading, and 30% opting to wrap the company name or logo around an H1.
Quite a few high profile web designers added their opinion to the H1 Debate. You can read their comments as well as interesting articles on heading tags by following @h1debate.
Personal Opinion
I do agree, there are certain pages that don’t have a specific main heading. For example the Digg.com website uses an H1 as the title on its homepage, yet uses an H1 as the main heading of an inside page, but every inner page has different content, and I think the H1 should describe it.
After reading the tweets, I have grown to like the idea of using an H1 on the homepage for the company name or logo, and to use H1 on ‘inside’ pages for the main page title.
From a search engine point of view, does an H1s’ weighting decrease if each page of the website is called the same name?
Accessibility
After looking into the subject of headings and accessibility, I came across a YouTube video by Aaron Cannon, and Accessibility Consultant who says:
All good screen readers offer a feature to jump from heading to heading. Assuming that headings are used properly on a website they can give an overview of what the author wanted to stand out. What were the important sections of the website.
http://uk.youtube.com/watch?v=AmUPhEVWu_E
With a screen reader, pressing the H key takes you to the first heading, and allows you to jump from headline to headline. This allows you to jump to the content and start reading. Using the same H1 would mean that a screen reader would read out the company name/logo every single time on each page. Is that useful? Is it the best use of an H1? Once maybe, but on every page, I can imagine it gets repetitive for the user.
The Early Days of HTML
Another area of my research took me to an early (1992) document, which states:
It is suggested that the first heading be one suitable for a reader who is already browsing in related information, in contrast to the title tag which should identify the node in a wider context.
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
The Answer is?
I don’t think there will ever be a definitive answer, and I agree with the comments that sites should be judged on a case-by-case basis. I think this quote sums it up:
The H1 element defines a level-one heading. A document generally should have exactly one H1 element to mark the most important heading.
What the ‘most important heading’ is depends entirely on the website.
Please do keep tagging your tweets with #h1logo and #h1title because even if your vote has been counted, your views will still appear on the website. Thanks to the thousands of you who have already visited The H1 Debate, and for leaving us with all your comments on this subject.
Paul,
Awesome post. Been a pleasure working on the h1debate.com site with you. Even though I focus on back end development I am still very much interested in XHTML markup. This whole project has been a great insight into front end design.
I totally agree with your “personal opinion” section.
Ollie
Hmm… I had always assumed that a header should be my H1 but now I am seriously reconsidering this. This is certainly making me rethink it.
One thing to consider, though, is that websites are not linear and for a screen reader it might be repetitive for people going from page to page but what of those who jump right to your page for the first time?
On my site I tend to have my company’s name as an H1 that is replaced by an image with CSS. For now I’ll continue with that but I’m definitely going to pay closer attention to it in the future.
Doug, in answering your question about visiting an inner page before the homepage, I have read a few articles which recommend including the company, or website name in the title to accommodate for this.
Great debate – and very interesting to read the different takes on this issue, the reasoning behind everyone’s opinions.
Having always used H1 for the company name/logo – I am now reconsidering as well….
Thanks for putting the h1debate.com site together
i would agree with you Paul, however the part under accessibility. You mention the ‘H’ hotkey to jump from heading to heading. I would attribute that usage to power or higher-end users rather than your standard user.
Something that also may be noted is that Opera has such a hotkey in their browser as well.
Hellos,
Very interesting topic. Good job!
I have to chime in about the H1 repeat issue for screen readers;
Using the same H1 would mean that a screen reader would read out the company name/logo every single time on each page. Is that useful? Is it the best use of an H1? Once maybe, but on every page, I can imagine it gets repetitive for the user.
If you follow 508 standards and have a “skip to main content” anchor like so;
Skip to main content
that solves the issue of the repeating header-region h1.
Anyhoos, good job again
-S
Clearing things up here: http://developer.cmzmedia.com/?p=242
Well, the thing is that a visitor may not always be arriving at/starting on the front page of a website. If they land on a subpage they are probably going to want to hear the H1. If they do start on the front page of a website and they don’t want to hear the H1 repeated then perhaps screen readers can be programmed to leave repetitions out but an H1 should still be present in the HTML of each page. Likewise, you may go to a tertiary page and not want to hear the H1 and the H2 repeated but the H1 and the H2 should still be present in the HTML of that page.
The thing people don’t seem to be getting here is proper structure of documents. How the documents are presented by CSS, JAWS, etc. is a different matter.
Paul, where you say:
I think you mean:
Even with the correction isn’t the company name or logo quite often also the main heading? If a website is a company’s website then the company’s name is the most important bit of information about that site, thereby qualifying to be wrapped in H1 tags. Everything else would be subservient to that and thereby qualifying for H2 – H6 tags.
Pingback: » Six Levels of Headers CMZ Media Developer
The moral of this debate is to use the H1 as you see fit. Every document is different, and should be taken into consideration accordingly.
I feel that the weighting of the H1 means that it should be used for the main section on that particular page. Quite often the homepage does not have a single focus, and therefore an H1 on the company name or website may be appropriate.
There will be instances when using an H1 for a website/company name or main heading are fine. It just depends on the site. That is my opinion.
Pingback: Clear Focus Designs Blog » Blog Archive » H1 use - site rank and accessibility
Great looking Blog! Found it through Yahoo. Just as an FYI, it didnt display right when I opened it in the Opera Interet Browser.