site label/using h1 on the homepage
After last week's article on multiple h1 tags I figured it would be nice to follow it up with some more h1 trickery. Another interesting h1-related issue is the markup of the logo/tagline in the site header and whether or when it should be constructed using a h1 tag. Opinions are scattered and often non-existent, so let's try to come up with something useful.
what's that h1 again
The h1 tag is used as the main title for the content of a page. This means that it roughly describes what a user can expect for the contents of the page he is on page, similarly to the page title defined the in head of the html. Structurally you would expect an h1 tag to be the first heading tag in the source, though that is usually not the case. The h1 describes the content, yet most sites start with a site header, making the h1 tag usually appear after the site header and as first heading in the site content.
Almost every page on a site has a main heading, no matter what type of page you can come up with. But there are of course exceptions to each rule.
the homepage
The homepage of a site usually doesn't have a heading. It's a landing page for people visiting your site, containing several content snippets you want to promote and will lead the visitor away from this page, deeper into your site. You could of course use a heading saying "homepage" and place it inside a h1 tag, but this is quite silly (which is exactly why you won't see it too often).
Which of course doesn't mean you shouldn't place a h1 tag on your homepage, as it is still a structurally relevant element. A common solution is to place the logo and tagline inside the h1, but only on the homepage. Which makes sense, as it's the entrance gate of your site (even though we know that many people don't enter your site through the homepage). The h1 tag serves as welcomer, stating the brand name and possible tag line. The visitor will know where he has landed, and will continue from there.
The difficulty lies with getting this implemented, as the logo/tagline are usually placed inside the site header which is often a fixed piece of code that is simply included on each page. So inform your implementors well, as they will have to make an exception for the homepage and generate a slightly altered piece of code there.
the code
<h1 class="siteLabel">
<span class="logo"><img src="..." alt="Brand:" /></span>
<span class="tagline">...</span>
</h1>
The code is quite simple, with one base element grouping the logo and tagline. We use a class="siteLabel" to style it independently of where it is used in the site (and at the same time add some semantic information through the classname). This base element contains a span for the logo and a span for the tagline. A div or p tag can't be used since html doesn't allow such elements within a h1 tag. For that reason, I've added a ":" in the alt of the image as to make sure it works as one single sentence. Small detail which I might write about at a later time.
This of course is the code used on the homepage. On all other pages, you could replace the h1 with with either a div or p tag, depending on what you think makes a line of text an actual paragraph. I myself use a div, but the choice is up to you really.
conclusion
One thing to avoid is to use the h1 tag to group your logo and tagline information on every single page, as it says very little about the content on a page. For the homepage though, it makes sense enough to place your h1 tag in the site header.
That said, I still think this setup has room for improvement, so if you have any good ideas, be sure to share them with me.
This is also a good solution SEO wise. On your homepage, the brand or site name is the exact keyword that should have your homepage show up as a result in search engines. And putting a h1 around article titles (on subpages) is a very effective way of improving your sites performance in search engines. I pretty much always use
Also, you may want to consider using a p tag for your tagline.
And here's the CSS for clean semantic accessible and SEO optimised mark-up to go with Microkid's PHP:
body.home h1, #site-logo {background-image: url(site-logo.png);background-position: scroll 0 0;background-repeat: no-repeat ;} body.home h1, #site-logo {margin: 0; padding: 0;} body.home h1, #site-logo {height:somevalue; width:somevalue;} body.home h1 a, #site-logo a {display:block;height:0;border-bottom: 0px;text-indent: -9999px;}
Which is exactly why I'm using the .siteLabel class myself. No need for comma-separated selectors, just style on .siteLabel and it will work independent of the base tag.
As for using a background-image for the logo, I would opt to put it in the html as it is an important part of your branding that is worth seeing even with css disabled. It's more than just decorative :)
Well, there's some trade off between the very clean h1 on the homepage or having a id on the h1 to replace a comma-separated selector in the style sheet. Generally, I prefer cleaner markup and a more verbose style sheet but either way there are "neatness" factors.
Why use a class for "sitename" or "sitelabel" instead of an id?
Finally, I guess I have to question the loss of the SEO and accessibility values that follow from having the text of the site name and tagline available all the time to search engines, screen readers and so on compared to the advantage of the logo image still being available to sighted users when the css is disabled.
Well, I don't know if I would call the bare h1 "cleaner", just more minimal. At the least, you lose some (non-standardized) semantic value. On the homepage there is no more site label, just a heading 1, which is somewhat strange.
Apart from that, I prefer a cleaner css as it amounts to (much) more trouble when bugs arise. Keeping a clean css is hard enough, even when working on it alone, so every measure to make it a little cleaner and more understandable is a good one.
As for using a class, most sites will have only one site label, but it isn't unthinkable that a site would have two (logo + tagline repeated in the footer fe), so there you would need to switch to a class instead.
And finally, I don't know what search engines do with alt tags, but theoretically putting the image in the source should have no negative value on SEO results as the text in the logo should be repeated in the alt tag.
"...theoretically putting the image in the source should have no negative value on SEO results as the text in the logo should be repeated in the alt tag."
The semantic tide seems to ebb all around these days.
The h1 on the homepage is with the title how and where, in the sense of the heading structure and document outline, the identity, the unique name of the site is confirmed or established certainly for most users and user-agents including search. To leave something so vital as the identity of the site for all except sighted and encultured users to the uncertainty of an alt tag too often left empty is...too uncertain, surely.
Furthermore, I guess that most web sites don't have a logo in the classic sense of a distinctive symbol or professional artwork: what they do invariably have is a name.
The importance, authority, or value of pages where ever you land on them from whether the homepage, a search engine results page or other referrer is often significantly determined by their ownership: about, portfolio, article subjects, goods all acquire relevance because of who they belong to, are authored by, or associated with, or produced by, a relation often established or revealed by the site name. This line of thinking, on which the logo or brand itself is based, helps make a strong case for the site-name being the h1 on every page and the page subject having an h2 heading. At least a coherent document outline and heading structure on every page and across the site is surely preferable to a mere logo identified in the markup in no better way than with a class name and an alt tag generally left empty.
I agree that many people will enter your site through a page that is not the homepage, and will need orientation for that. Even though the h1 could play an important part there, I believe that the page title (title tag in the head of the html) makes sure of that. I also believe that this tag has even more power than the h1, SEO and accessibility-wise, but don't quote me on that :)
Ironically, you reduce the chance of people entering on a different page from the homepage when reservering the h1 for logo+tagline on each and every page, as the main title will only be advertised in a h2, bearing less influence of SEO.
Furthermore, the logo is more than simple design, it's an essential part of the branding and belongs in the html source. If you really don't trust the alt tag, just add the text in the logo in a hidden span, though that will probably be a little irritating for screenreader users.
And finally, I believe that on most sites content is more important than branding. It's nice knowing on which site you are, but less important than finding the information you need.
This last bit is of course not a real argument, as it's a bad implementation of the method rather than a fault in the method itself :)
"This last bit is of course not a real argument, as it's a bad implementation of the method rather than a fault in the method itself :)"
Of course it's a real argument; a method doesn't exist independent of its practice or implementations, and we all know especially having listened to the to-ing and fro-ing in the debate over the alt tag in html 5 that the alt tag is, indeed, often left empty and for many reasons. It seems to me that we have an interest in creating usable methodologies/practices for our markup's implementers; from that perspective, an important question is will this method get implemented or implemented correctly. In the case of the alt description, the answer is, often not. Furthermore, the convention as I understand it is that the alt tag is left empty for graphics.
As for the "real argument", whether or not it's semantically sufficient to replace the site name in the page "header", even in the homepage, with just an alt description of a graphic/logo, I have to say that I don't know if search engines and screenreaders treat an alt description equally to the text inside an h1 heading but it has been my understanding that there are compelling reasons having to do with search and accessibility for using structured semantic markup and a coherent document outline and not replacing text with graphics. Surely, using an image even with an alt description inside an h1 to replace the text has been regarded for a long time as bad practice. The counter that the logo is more than design and belongs in the source even replacing the h1 text is just not credible in light of the web standards and best practices we have all been following these 10 years or so.
I'm not making a case for reserving the h1 for the sitename on sub-pages ; indeed, I agree with your conclusion in your main post. What I don't agree with, what led me to retrace in my reply above the importance of the sitename within the document outline, is the substitution of the sitename in the source with an image.
And I'm still dumbfounded by, "The homepage of a site usually doesn't have a heading"?
I meant to say:
"...it has been my understanding that there are compelling reasons having to do with search and accessibility for using structured semantic markup and a coherent document outline and not replacing text with graphics in the source."
Well, It's not as if hidden text hasn't got its own share of problems. It often fails to find its way into the final source, or fails to get translated. If the implementor forgets or fails to implement the alt tag, you simply tell them to change it.
Unless the graphics contain text, in that case the text has to be repeated in the alt tag. And yeah, it's not recommended practice, but I believe that's mainly for text headings (you can't copy the text and it's hell to maintain). Apart from that, I believe there's little wrong with using images and alt text.
I'm actually quite surprised by this. All images that have a function exceeding mere decoration belong in the html source, at least, that's how it was taught to me. Maybe you have other sources, but the logo is one of the best examples of an image that belongs in the html source.
What I meant with that is that most pages on a site have a natural h1. You go to a contact page, it will say "Contact" first thing in the content section. A homepage doesn't really have that, there's no real heading to put above the content, apart from "homepage", but that's a bit silly.
"What I meant with that is that most pages on a site have a natural h1. You go to a contact page, it will say "Contact" first thing in the content section. A homepage doesn't really have that, there's no real heading to put above the content, apart from "homepage", but that's a bit silly."
Surely, the natural h1 of the homepage is the sitename, and it belongs in the "header" or branding section of the homepage? Without it, the document outline is incoherent; on your homepage your markup is perfectly structured (like on every other one of your pages here which all have an h1)--except there is no h1. That's quite a breakdown in the document's structure, and for no good reason that I can see since it is easy to have the sitename and the logo in the h1. What is wrong--when everything seems to be so right--with having the homepage h1, with the heading text the sitename, in the branding or "header" section?
I've been looking at a number of sites to see what is being done in the wild and to get some guidance around the h1/logo/sitename issues that you've brought up here (somewhat at my encouragement), and I've taken the BBC web site as an example to discuss since it does a bunch of things that you've pointed out, like having the logo in the markup and more than once on the same page, and that I think do an excellent job of a coherent document outline and meaningful structured markup that strongly connects the sitename with the content in the h1.
The BBC has its logo with an alt description in its banner and footer sections on every page and an h1 on everypage. Specifically:
On the Homepage (new):
In the banner
(but the heading text is missing)
In the footer
On the News page (old):
In the masthead
In the banner
In the footer
On the BBCiplayer homepage section (new):
In the top
In the top
In the footer--logo and copyright but I can't find them in the markup
On a BBCiplayer Content page:
logo at the top--same
logo at the bottom--same but I can't find them in the markup
Some thoughts on all that:
The BBC could easily add heading text to the h1 on the homepage and standardize a site-label class name for its "header" and "footer" logos. But what it has done brilliantly is strongly connect the sitename with the content in the h1 on every page but the homepage (and it could fix that) by beginning those headings with "BBC".
A correlate of that strategy is on the Web Standards Project homepage where all the subpage h1s have a leading tagline that shapes the following h2 that repeats the link or navigation section name (Learn, About, and so on).
First off I have some questions which might help determine if it is a good idea to put a logo image in the source to stand-in for the site-name even in a non-heading:
1.Is it convenient for screenreader users to tab through the heading structure of a document?
2.If headings are missing, can that confuse screenreaders/screenreader users?
3.Do screenreaders read the link text, then the link title and then the alt description of an image wrapped in a link or anchor tag? Do they identify the alt description as describing an image?
4.How does a screenreader read an acronym or abbreviation in an alt tag?
5.What weight/relevance does a search engine put on an alt tag description compared to heading text or link text, and doesn't the search engine "think" the alt text is describing an image ?
Questions asked, here is my go at markup that includes the logo in the source ( I can't say that having the logo with the heading or link text makes any sense to me; I still think the logo like any graphic belongs in the CSS):
For the BBC
BBC homepage:
BBC logo and copyright
BBC subpages
Let's say this web site's acronym/abbreviation is "TOT" (the BBC or IBM, for example, are unusual cases in that most people know them, and may know the abbreviation better than the full-name).
TOT homepage:
logo and copyright
TOT subpages
Finally, I'd be grateful if you would delete my comment 11--I didn't have the indents done properly.
I don't believe it is. It's cool to see you've done a whole lot of investigation, but I feel you're overlooking one important thing.
The h1 is the document title. The question is whether you see your document as something that stands alone or as a part of your site. Take for example this blog. The fact that this article was published on this blog is of very little relevance (of course, for me it is, but a reader shouldn't care too much). Therefor, the h1 of this blog shouldn't really reference my blog in any way, but should function as the heading of the content found on this page.
Of course branding is important, but the most important branding is done on a higher level than the h1, namely the title tag. This is (as far as I know) the first thing a screenreader or SEO engine picks up. This title should contain your site name, making further notices a little obsolete, certainly when you're going to introduce it in each h1.
The natural title for most homepage would be one describing the content, which is usually a selection of focus items promoting several sections of the site. Onderhond.com is not a natural h1 on my homepage, since it tells you nothing about the page you are on, and you should already be aware that you are on my site, since the title tag mentioned that already.
Pretty much what I described above, but since I can't find a proper solution to work around that there is nothing wrong with placing the h1 on the homepage around the logo/sitename. It's just not perfect is all :)
Looking at the W3C validator Semantic Data Extraction results for your work blog, they're a bit impoverished. And because there is no h1, there is no document outline extracted. I don't know, but if having no h1 throws off other user-agents, screenreaders or semantic data extractors or collectors, then missing a h1 heading especially on a homepage is a serious issue.
http://www.w3.org/2005/08/online_xslt/xslt?xmlfile=http%3A%2F%2Fcgi.w3.org%2Fcgi-bin%2Ftidy-if%3FdocAddr%3Dhttp%253A%252F%252Fwww.onderhond.com%252Fblog%252Fwork&xslfile=http%3A%2F%2Fwww.w3.org%2F2002%2F08%2Fextract-semantic.xsl
However, I can now suggest a h1 for your work blog homepage that you might be comfortable with and that would have value to screenreader users and SEO/findability value as well-
Actually, I wasn't aware of a h1 missing on the blog overviews, so thank you for pointing that out. :) I'll make sure to fix that as quickly as possible.
And I do agree that every web page should always have a h1 tag. I'm still not sure about what to put in there though.
Edit: and interesting tool btw, might start using that more often to check my document outlines.
I wasn't picking on your blog, actually--I re-validated a page I was working on and decided to compare the results of the validator document outline with the firefox extension/ web dev toolbar I normally use. Then I tried the semantic data extractor and was gratified to see all the stuff on the page it considered semantic. Then I went on a little spree extracting semantic data on various web sites which led me back here--because I'm still interested in the questions you've raised about what belongs in, the source of, a h1 heading--heading text obviously, and surely not a graphic--but after that we've opened up to re-considering what we've been claiming is structured markup in our documents. I want to admit that I've been dogged about this in your comments because I'm afraid that with the ascendancy of HTML 5, that paves cow paths and anything goes in the name of inclusiveness, tolerance, broad-mindedness, no mark-up is wrong now, and backward-compatibility, it's open season not just on conventions per say but on standards: Not sure what an h1 does--leave it out! Want your logo to load right away--put it in the source of the h1 heading in place of the text. Meh. I don't want things to go like that; but that's the trend I see with too may redux of "Smart CSS Ain't Sexy [standards] CSS" but for markup...
I think we should be focusing on how to use/implement/extract semantic data in our documents, rdfa, GRDDL, deri pipes, and so on. It's in that kind of really productive fecund context/transformations that we should be reconsidering our document mark-up. As it is, we just seem to be fumbling around.
That said, I think the h1 heading text for an index page whether the homepage or of a section is going to have to be of a piece with the content of the title, content description, site-label and the link back to homepage, and then the rest of the document outline. Some of the worry about what to put in an index page h1 heading must start with rethinking what's been put in the title and then working down to implement whatever goals you have.
Forgive me for using onderhond.com as an example--my powers of invention are waning! However, what do you think, as an example of a homepage? I personally don't see the need for the class "site-label", but we have taken the h1 out of the "header" and we have not used the sitename as the h1 heading text.
* required fields