I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis!

In search of a good H1

Published on Tuesday, February 20th, 2007

I’ve always liked semantics and to choose how to properly mark up content to convey the information the best way possible. But, and I know this might sound weird, as of lately, I’ve had a harder and harder time to find the suitable content for one specific element: the H1.

You know, you take a look at the design you’re supposed to implement, but there’s no standout heading that is the one (if this is a shortcoming of the designer or me, I will leave unsaid). And that kind of leads to the question: what do we use the H1 element for?

One usage is to have the logo/web site name within it, and I guess it makes sense to some degree. But personally, I think I’d like the most important heading in each web page (just one per page, of course) to have a H1 element, not just one general heading that is the same all across the web site.

Problem with that is that web pages, except for specific article pages (in blogs, for instance), have just one heading that’s worth more than any of the others. So, while I can spend a lot of time choosing where to use list elements, properly mark up quotes, choose freely amongst all the other heading types, H1 always comes back to cripple me.

If the logo is the main heading, fine, no problem. But what if I have higher ambitions for it?

Free People Search The most effective people search engine ever built

Posted in Developing, HTML/XHTML, Technology | 32 comments

32 comments

Jeroen Mulder
February 20th, 2007 at 9:29

I’ve often had the same problem, which is why I often choose the solution depending on the page type. For straight-forward content pages, it makes sense to make the article’s title the H1. However, for the cases you mentioned, so far, I seemed to have sticked to assigning the site’s title (logo) and page title as the H1.

It is one point I am not fully happy with either, but I have yet to find a better solution.
Andrew Green
February 20th, 2007 at 10:22

If there’s no single standout candidate, does that mean that the page has several potential h1s? If so, is there a massive problem in having more than one h1?

The WCAG notes that we should make sure the sequence of headings makes sense, and that levels aren’t skipped — but just as we can sensibly go back from an h3 to an h2, can’t we go right back to the top? Does the hierarchy of headings on a web page need a single root?

These are genuine questions, by the way. There seems to be a deeply-held belief that a page should have one and only one h1, but I’ve never encountered an actual rationale for that.
Chris
February 20th, 2007 at 10:32

I almost always end up using the logo (or company name) as h1.
If a page is designed by advertisers (I work in an advertising agency) you often have the problem that the page has no good structure but is full of boxes and teasers and images and no content… In this case I’m happy to have a logo as some fix-point.

However, I recently discovered the Firefox-Extension Document Map which I use to explain our apprentices the use and the idea of headings and document structure. It’s very useful to check the semantics of your headings.
PÃ¤r Axelsson
February 20th, 2007 at 11:56

@ Andrew Green : IÂ´m with you on this…
Tim Owens
February 20th, 2007 at 13:30

I’ve always considered the Company Name/Logo to be the likely candidate for a couple reasons. From a page layout standpoint it is likely the #1 first thing seen on the page and especially for text-based logos (which seem quite popular on the Web2.0ish sites like Flickr) the company logo is going to be the largest and most important text on the page.

Also from a standpoint of SEO I would want the name of the company or blog or whatever to be the first and most important thing scraped for search results. Title tags work to incorporate article titles along with the company/site name so I feel at least with current markup h1 is suitable for the websites name/logo.
Tommy Olsson
February 20th, 2007 at 13:50

In my humble opinion the H1 should always describe what the document (”page”) is about. The only time that should be a problem is on the “home” page of a site, where the company name is a likely candidate.

Web pages exist in isolation; there is no concept of a “site” in (X)HTML. A search engine lists results to pages, not sites. Thus the H1 should explain what the page is about. A site where all pages have the same H1 (the company name) is less useful for people who use search engines.

A special case is articles that are split into multiple pages. Here, the H1 should (in my opinion) include the article’s title followed by something like “(part 3 of 7)”.
Jules
February 20th, 2007 at 14:20

I wrote about this in my post, The Heading 1 Challenge. I agree with Tommy that the H1 should describe the content of the page but there are some pages that are difficult such as home pages and language direction pages.
Jeff L
February 20th, 2007 at 14:29

I agree with Andrew - I’ve never heard that you can’t use more than one H1. While I traditionally use the company name in the H1 (and use CSS to show the logo), I don’t see any reason not to do that and then also have the page title also be in an H1 further down the page.
bruce
February 20th, 2007 at 14:29

This has been troubling me, too. I’m with Tommy that it’s not useful to have only one h1 per site - and it’s got a practical disadvantage of limiting your arsenal of subheadings to 4 levels - for many big corporate sites, that’s not enough.

But I’m also with Andrew Green. Although it might dilute the Google juice achieved by having one h1 per page, describing that page, I’m mulling over having an h1 above the list that is the navigation (”navigation”) which I position off screen, but which is a useful destination for screenreader users’ in-page nav. That would make two h1s on a page.
Jakob Heuser
February 20th, 2007 at 15:24

I’d have to agree with the above comments, it’s all about the context of the page. In articles, it’s pretty easy. A good bridge I’ve found is to use the page’s content to give a meaningful H1 when appropriate on a client page. For example, if you are on the “about the company” page, make the H1 say “About the Company”.

If it has a title, it probably also has a good H1 to go with it.
Michael Montgomery
February 20th, 2007 at 17:31

I tend to use the company/organization’s name and/or logo for the h1.

My question is about the best way to do that:
* Some use an h1 of Company Name, and then use image replacement for a background image of the logo.
(…and the only way I know to make that clickable is to overlay some non-semantic transparent graphic element??)
* Some use an h1 that encloses an img with an alt=”Company Name Logo”
* Others??
Nick Fitzsimons
February 20th, 2007 at 18:21

In section 7.5.5 of the HTML 4.01 spec, all that it says is that “There are six levels of headings in HTML with H1 as the most important and H6 as the least.” It doesn’t say that there should be only one h1; if the page has several top-level headings of equal importance, it should have several h1 elements. To do otherwise is simply wrong (in my opinion).

I was actually thinking about this very issue yesterday in relation to the implementation of an intranet web application UI for a client. The application has two main areas, side by side, which each have a title. One is not more important than the other, so they both have an h1. The name of the application doesn’t actually appear on the screen (as there is no need for it in the case of this app), so that is only in the title element.

FWIW, in section 7.5.5, there is a note to the effect that skipping headings is considered to be bad practice; the example they give actually uses two h1 elements. While this not may not be normative, it certainly shows that it was never the intention of those who created HTML that there should be only one h1 element to a page, but simply that the different levels should be used appropriately.

I think the “There must be only one h1″ brigade are just parroting something they read somewhere years ago, which has come to be seen as best practice, although it was only originally one person’s opinion, and a misguided and misinformed opinion at that. It’s similar to people laying out tabular data like calendars using floated divs - they don’t realise that “tables should never be used for layout” does not mean “tables should never be used”.
Daniel Talsky
February 20th, 2007 at 18:33

To answer Micheal Montgomery, there’s some good reading on Fahrner Image Replacement and its ilk for H1’s and that whole universe:
http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
http://kryogenix.org/code/browser/lir/
http://www.tjkdesign.com/articles/tip.asp

There’s more, but with a little googling on Fahrner Image Replacement, you’ll get the main points of the conversation.

As to “where to use the h1″, I definitely contest that the company logo / name is the best place for the h1, partially for reason’s Tommy Olssen (in the comments above) mentioned.

I worked with some SEO folks recently, and they thought that the page title was the best thing for H1. When it’s not an article, you make it the category name. So… actually make the title tag, the h1 tag, the link in the site map, etc… all say “About Us”. He felt that putting the company name in the h1 was squandering SEO.
Nick Fitzsimons
February 20th, 2007 at 18:38

@Michael Montgomery: I would say the second option (image with suitable alt attribute content) is best. On a site I worked on a while back I allowed myself to be seduced by the siren call of the image replacement method, but in the end it was more trouble than it was worth, so I switched to just having the graphical logo with the name in the alt attribute. This technique has proven to be perfectly accessible both with text-only browsing (using Lynx) and with screen-reading software (I’ve just tested with the latest version of Jaws).

It seems to me that on more than 90% of the occasions when image replacement techniques are used, they are actually unnecessary; HTML already has a perfectly usable method of making an alternative to graphical content available, and it is that method that assistive technologies expect to encounter. Keep it simple, and not only will it just work, there’s also less to go wrong
Guilherme Zuhlke O’Connor
February 20th, 2007 at 18:49

I don’t think is mandatory to use only one <h1>, and certainly is not invalid markup, however makes little sense to me use more than a single <h1> on a single page.

I totally agree with Tommy Olsson that a page has a structure of itself, although being part of a bigger site.

I tend to think the <h1> more or less related to the <title> element. There are several guidelines for <titles> around, some of them very wise.

For instance i like to think a <title> should describe very briefly what a page is about. I tend to do the same with the h1, and that is why I can’t see much use of multiple <h1>s on a single page.

The <title> is more directed to the browser and search engines while the <h1> is directed to the reader.

Sometimes it does makes sense to replace the <h1> for an image, a logo, or simply get rid of it, and I’d do it on CSS.

Ultimately, a site is somehow like a book, h1 is the title, h2 is parts, h3 is chapters, h4 is sections and so forth. Seems strange to me having a book with two titles, but I’m completely open to the possibility that I can’t see far enough.
Devon Young : H1, As An Anchored ID
February 20th, 2007 at 20:04

[…] H1, As An Anchored ID February 20th, 2007 @ 02:09pm
Like Robert Nyman, I’ve been thinking about H1’s […]
Tommy Olsson
February 20th, 2007 at 20:49

Using more than one H1 on a page isn’t semantically wrong in itself. It indicates that there are two or more separate topics being addressed in a single page, that’s all.

However, when one finds oneself in that situation one should pause and think for a bit. Do these two topics really belong on the same page? Should they be two separate pages? Sometimes that will turn out to be the case, sometimes not.

A page that deals with the semantics of ABBR and ACRONYM elements as well as providing an instruction on how to install the Fuel Injection Performance Kit on a JeepÂ® V8 engine should clearly use two H1 elements. But it might be a far better idea to make two separate articles with one H1 each.
NICCAI
February 20th, 2007 at 21:08

I agree with Tommy on H1 - it should describe the document. In my mind, there aren’t many situations where this is difficult - unless you use the element for the logo. I find that causes me more grief. With that said, I do recongnize H elements are problematic. My issue is what to do if the content needs to skip a level. To me, this happens more often. I set up styling for H1-4, and then a given document doesn’t make use of H2 for some reason.
Guilherme Zuhlke O’Connor
February 20th, 2007 at 23:01

@NICCAI:
I find that skipping levels is as strange as multiple h1’s (and of course, no exception to h1, you must have one).

A h3, for instance, is a subsection of a h2. How is it possible to have a subsection of an nonexistent thing?

Probably one of the following solutions may apply:
* the h3 is actually a subsection ofe h1 element, and should be upgraded to h2
* diverse h3 elements coexist in the same level but, for some reason, they are so different that is difficult to categorize under a single h2 super-section.

This is pretty much similar to the case that Tommy Olsson described of two things that should be separated. But unless there are two h1 elements, not necessarily they should go on different pages, only under two different h2 elements.
Pat
February 20th, 2007 at 23:21

I prefer to think of the levels of headings much like a business letter. Your Logo or heading is most dominant then so on.

With that in mind I’d much prefer to see the company name or what have you first, especially if I’ve stumbled upon that site other than the homepage.

Secondly it’s nice to see the navigation right under the main heading (h1). I prefer it this way.

For instance if I remove styling from your blog Robert, first heading I see is the H2 tag… then further down the page is your H1.. not that this confuses me, but I’d much prefer to see:

Robert’s Talk (so I know where I am)
.. navigation .. (usually a bulleted list)
In search of a good H1 (your current story title)

I don’t know what the real impact on this is for Google.. or other engines (I’m no SEO), but design wise without styling is how I personally go about it. I guess I don’t give it a second thought. I mean who wants to see “About us” as the main heading without knowing first and foremost who “About Us” is for? If that makes sense.
Robert Nyman - author
February 21st, 2007 at 21:07

Great discussion, guys! Thanks! I’m baffled about how interesting you make my posts with your insightful and thoughtworthy comments!

Especially interesting ideas and takes about multiple H1 elements in the same web page.

Jules,

Very good article! Thanks for the link!

Daniel Talsky,

Thanks for helping Michael out with links!
Jeff L
February 21st, 2007 at 22:48

If Zeldman and the Happy Cog crew can use more than one H1, than I think the rest of us are allowed to as well.
NICCAI
February 22nd, 2007 at 1:01

@ Guilherme - I fully agree with you.
I just find that I’m invariably in a situation where someone (writer, client, etc) decides to alter the semantics of a given document. It always happens near the end of the project, and it doesn’t warrant changing the structure as a whole. I guess I’m questioning whether skipping an H level is absolutely incorrect? If it is, I could argue that the logo being an H1 is wrong. How can you have every document with the same H1? Isn’t that pulling your site map into your document map?
Guilherme Zuhlke O’Connor
February 23rd, 2007 at 18:09

@ NICCAI:
I completely understand your point, about the client’s demands.

This week I ported my blog to the Wordpress platform and, to make things easier I kept most of the PHP of the sirius theme (with some tweaks I made) and recreated the CSS I designed for my previous platform to suit it.

I found out that the title of each post is an H1. So in my very page, because of external causes, I have plenty H1s. I could have changed that, but I decided to leave it like this for now.

The trick to style them differently was to use descendants, but semantically, I think my page is confuse because of this.

I think you may be right about the H1/logo discussion, at least for a very good number of cases, in fact, the logo in my page is not the H1, but a div of itself and the H1 is hidden with CSS. That is not true in all my projects, though. I’ll think about it.
Siegfried
February 26th, 2007 at 14:56

Hi,
indeed i stumbled over this problem on my own site, too. The main problem is that for a single page you have 2 main headings: One for the site and one for the page. For some reasons (corporate identity f.ex.) it is recommendable to put the site name (=company name and/or logo) on every page. And obviously the site name is hierachically higher than the page name. Although the page name (which then would logically build the h2 heading) is more important for the single page.
Theoretically it is perfectly legal to have more than one h1 heding. But if you use the site name as h1 heading that would not be very useful.

If you like to you may have a look at http://www.rorkvell.de/tech/dc where i proposed a microformats-like usage of the Dublin Core class names. The class name “DC.title”, applied to the h2 heading of a page, denotes exactly this heading as the pages title by still allowing a h1 heading to carry the site name. This does not solve all the problems here but in some cases may be useful.
Kirk Franklin
May 3rd, 2007 at 19:32

The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site. (Since there’s only one title, that also implies one h1 per page.)
Robert Nyman - author
May 3rd, 2007 at 22:32

Kirk,

I definitely agree that the name/title of the page should be one H1 element, but at the same time, I think that marking up the logo as a H1 feels as correct, according to the specifiaction as well.

So, the big question is: is several H1 elements ok? The answer to that seems to be in the eye of the beholder of the spec…
Qué Pasa? » Blog Archive » H1, As An Anchored ID
December 1st, 2007 at 1:27

[…] Robert Nyman, I’ve been thinking about H1’s too. I’d like to see the next HTML specification turn H1 usage into something more like an ID […]
ryanod
January 6th, 2008 at 21:41

IMO, you run into problems if you have a bunch of pages all with the same h1 tag. The reason? They each start to compete with each other for that search query. If every web page has its own unique h1 tag, then each is optimized for it’s particular h1 content. If you have 40 pages each with the same h1 tag and someone searches for that content, how is a SE supposed to determine which page to send the user to?

One approach I have considered is the following: suppose your web page is www.boardgames.com. You could use “Board Games” as the h1 tag on your home page. Then, on all subsequent pages, you could use derivatives of this such as “Board Games: Classics” or “Classic Board Games” or whatever. This way, you are still including the main h1 content, but in a more focused manner.
Robert Nyman - author
January 7th, 2008 at 8:54

ryanod,

I think your naming suggestion is good, not applicable in all cases (and most certainly not desired by customers - they usually dislike texts stating the obvious).

If you have 40 pages each with the same h1 tag and someone searches for that content, how is a SE supposed to determine which page to send the user to?

I’d say that first they would go by if that search term occurs in more than one place in a page, and then it will chose that one. Most likely, though, which is also correct, is that it would then choose the start page of the web site to link to.
ryanod
January 17th, 2008 at 18:02

In most cases, my h1 tags are hidden from the customer. It is usually replaced by a logo or header. The header conveys the overall branding of the site / page while the h1 text (again, which can only be seen by the search engine or by a visitor with images turned off) is meant for the search engine. This allows each page to have a very specific h1 tag - that would probably be viewed as overkill by the customer.

I know this can be problematic if a user is using a portable device as they will often not have images displayed. My focus isn’t on the mobile market though.

ryanod
Robert Nyman - author
January 17th, 2008 at 20:53

ryanod,

I guess it depends from scenario to scenario. Search engines might find it to be spam if you cram too much into the headings as well, while I do agree that sometimes, metadata-wise, you want to convey more information than meets the eye.

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.