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.

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

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.

One approach I have considered is the following: suppose your web page is http://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.

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…

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.

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.

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!

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.

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.

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.

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.

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

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.