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.

Ollie has also been working on a Rugby and Cricket version and I think there are plans for a Motorsport version too.

I thought the project was a really good idea, and so volunteered my services to produce a quick PhotoShop mockup and XHTML design, from which Ollie could base the sites on. I initially based the site around a 12 column grid design, with each team crest taking up column and used a template from the extremely useful 960.gs site.

I used the CSS3 border-radius property in this project, and with this, you can create rounded corners without the need for additional divs, images or JavaScript. I would be cautious of using this on a client’s site, but I thought that a site like this could benefit from a little bit of progressive enhancement. For browsers which don’t support this property, the div just shows square edges.

To use the same effect, just add this code to the div:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

The site design had to be flexible enough to work for multiple sports: football, rugby and cricket, and with the future plans of motorsports too, the design had to be versatile enough to work for all of these. So the design was left simple to edit, with a repeatable background and a feature image which is controlled by another CSS file.