The H1 Debate
Paul Randall and Ollie Parsley have created www.h1debate.com, a site that is asking the Twitterverse what they think the <h1> tag in HTML should be used for. One side of the argument postulates that H1 should be used for marking up your logo or company name and the other side suggests it should be used as a main title, for example the title of the particular page. Currently they have a little over 200 votes based on the Twitter hashtags #h1logo and #h1title, with title commanding a very healthy 75% of the vote. And guess what, I think that 75% are wrong. Let me explain why...H1 - H6 are used for marking up headers in HTML. These can be section headings, post titles, whatever needs differentiated as a unique section of the page, with the numbers expressing the relative importance of the section. From the W3C definition for HTML4:
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.The argument I believe some people put forward to not use it for the logo/company name is that it should be used for the most important section of a page i.e. telling you what the page is about. I would argue that a page on a site is a sub category of the overall site structure and therefore the company/site name is the defining piece of information to describe the page. Typically, I will mark up a page logo inside an h1 pair with the assumption that, if images are disabled, the alt text with the company name will therefore be displayed with h1 styling, making it the most prominent heading on the page. (We can get into the discussion of displaying header text off-screen for SEO at another time.) Let's take a fictional example. Assume there is a company called, I don't know, Disney. We can assume they make insipid yet strangely compelling children's movies. Let's also assume that brand recognition is pretty important to them. They might have a site that looks like this:
It'll probably all be done in Flash, because kids like shiny things, but they could well have a plain HTML version too:
It is clear in both versions of the page they regard their company name as pretty important, it defines what the page content is about. Let's take another look at the HTML version of the page, this time without any styling applied:
Look at that, top of the page, loving cradled by a brace of h1 tags is the company name, the most important element on the page. Don't for a minute think that I believe Disney to be the paragon of web design, or one whose decisions should be taken as gospel, but it clearly illustrates my belief that, if you take a page out of all other context, the site title/company, not the page title, is the defining element. Things get even more interesting when you start to look at HTML5 (not that the spec is finished yet, or reliably supported). It introduces a number of semantic elements such as <section>, <nav> and... <header>. Many people are excited as they will be able to use <header> to replace the standard <div id="header"> that most people find themselves using to represent a header on a page, which normally contains elements consistent across a site, including logo etc. The <header> element must contain at least one h1-h6 tag as a child element. You could argue that the page title could be included in this section to fulfill this requirement and be placed under the logo or company name, but looking at the HTML5 working draft we find:
The rank of a header element is the same as for an h1 element (the highest rank).My argument is this: is the title of a page the most important element to you. If you were forced to create a site using nothing but <h1-h6> and <p>, would you omit the name of the site or rank it at a lower level than the title of the page? You can register your side of the argument by making a tweet with the hashtag #h1logo or #h1title and they will automatically pick up on it. You can also follow @h1debate on Twitter.