I just noticed that one of the questions the theme sprinters have for Mark Boulton is to do with the h1 debate. Should the logo be in an h1 as per the final iteration of the design or should some other method be used?
The SEO side of the argument often sides with reserving the h1 for only the page title and ideally, there being only one h1 tag on any page.
The semantics side of the argument is that the logo is a very important part of every page and that the most appropriate HTML tag should be used to wrap it. This is especially true of Mark Boulton's design where the logo is added by having the name of the site (Drupal) as text in the source code and using CSS to indent the text off the page and use a background image do deliver the logo.
Here is a site that is a poll on this debate http://h1debate.com/
I certainly feel that the h1 is semantically the best tag to deliver this text in if we are looking to have source code that 'weights' the importance of content. I would like to know if anyone has real world evidence where the use of more than one h1 on a page has a negative impact on search results.
Be interesting to see what others think - what we need is a 'sitename' tag!
Comments
I think having the logo
I think having the logo wrapped in an H1 tag on the home page is quite appropriate, but begins to be inappropriate on other pages.
I do not agree that the logo/site name is of the highest importance on subpages of a website. The highest importance is the primary description of the content of the page: ie, the title. Although it is content related to Drupal, the title of the page is of higher importance, not equal importance, to the source of the content. The source can be appropriately inferred from the document's page title, "The title of my page | Drupal", which is also weighted heavily for a HTML page's context.
I would think the best course of action would be to wrap the logo/site name in an H1 tag on the home page, and then change it to a strong tag for all other pages.
logo in heading tag
Yep, thanks for adding that, it is exactly the conversation that went on in our office after I posted the original post.
Only thing I would like to say is that I didn't mean that the logo is of the highest importance (perhaps except for the home page) because as you rightly point out the content description is the most important in terms of a 'weight' but HTML doesn't give us a way of weighting the importance except for h1, h2 etc.
By wrapping the logo (or logo text) in strong tag then I'm not sure it is the correct tag for the content. I think that the name of the site (or its logo) is in fact a type of heading. On this basis it would be better suited to use an h2 for the logo text on pages other than front (rather than strong text) and reserve the h1 for the content title/description. After all, the name of the site is a type of heading and needs weighting so.
This does mean that our source code is structured h2 followed by h1 but then source code order would suffer regardless no matter what tag we use, I'm specifically just interested in trying to work out what tag is best suited from a limited set of choices.
I have considered using the
I have considered using the h2 tag as an alternative, however, I don't think it makes sense structurally. The header tags are a continuation of the subject defined by the previous header, with h1 to define the topic of the entire page. Of course modern abuse of HTML markup frequently stretches this concept very thinly (for example, content in blocks are frequently not directly related to the topic of the page yet we still wrap their titles in h2 or h3). Even so, I think we should avoid making headers out of order.
Strip away all style, keeping in mind that default rendering of the styles brings importance to our eyes in the same manner as the relative actual importance of the text. In this scenario, how would you want the content to appear? What is the most readable format? What would allow a user to quickly skim the page and find the section that is of interest to them? Consider also reading all the text - how would you convey the text's formatting with your voice and pacing?
Very frequently in graphic design, we put the source of the content just above and smaller than the title/descriptor of the content. For example, we'll put the type of story, "breaking news", above the story's title. It's with this sort of thinking that leads me to believe using merely descriptive text, rather than a header, is OK for a site name within the HTML. I chose 'strong' as a tag because it is not as important as a header, yet is above being considered plain text. In a screen reader, it would still be emphasized but not stressed as much as a header.
<div id="site-name"> would be preferable (except on homepage)
The Zen theme had this same debate. Here's the background: http://drupal.org/node/279896
So we decided to only wrap the site name in a H1 only when the page has no $title (which often means "just on the homepage"). And the page.tpl.php's $title variable was always wrapped in an H1. I think that's a good compromise.
- John (JohnAlbin)
- John (JohnAlbin)
As it stands...
We plan to make the site title an H1 on the homepage only. All points of view are valid, but SEO is like a box that everybody points at and talks about but doesn't know what's inside. It seems the majority of people believe one H1 per page is a better practice, so we'll move forward with that approach until we have more information.
Todd Ross Nienkerk
Co-founder, Four Kitchens | IRC: toddross
Todd Ross Nienkerk
Digital Strategist and Partner
Four Kitchens: Big ideas for the web
IRC: toddross