So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.

If you don’t currently use something like this already, I do urge to add it to your next new website, because even if you don’t include a table, or list at the moment, you (or your client via WYSIWYG) may do in the future.

The document is actually HTML5 and UTF-8, but you can copy and paste the HTML/CSS however you like. I also tend to add a reset style inside a global stylesheet to save downloading two documents. I’d love hear how you layout or comment your CSS and whether you split them into different files such as layout and typography too.

Open kitchensink.htm

Note: If you have any additional code or CSS which you think should go into the document, add a comment below. Thanks.

Previously, I have used IE7/ IE6 specific style sheets with completely new backgrounds, each 1px to the left or right of the original to compensate, but I decided to do some digging and found this blog post:

http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

One of the comments I came across suggested a very simple alternative to multiple stylesheets and images, and is the version I used in my recent design:

html{background: #242424 url('../img/background.gif') repeat-y center; margin-left: -.1px; /*1px shifting hack*/}

A simple use of a margin allows the same image to be used for all browsers. What’s even better is that, although technically a hack, it is valid.

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.