How to properly mark-up a logo

writing semantic mark-up for a linked logo

[PublicSphere]

A logo is pretty common in web design. If the logo is positioned in the top left above the main content I tend to mark-up with H1 tags around the <a> element with the logo name inside the <a> tags.

However, recently I have been writing landing pages, that start with an H1 in the top left followed by the pages content. Then, in the sidebar on the right I put the logo at the top, but I'm not sure what element to use. Or maybe I should use an image in this case, since it is not really the page heading but actually just an image?

What do you use / what is generally considered correct?

[willybfriendly]

I generally put the logo in a background image. Using print as an analogy, letterhead (which has the logo) is really a background for the content, so I think this makes semantic sense.

It seems to me that if the logo is placed on page it is an image, and that is the element that should contain it.

[PublicSphere]

I just checked out two sites that, to me, are authority on these types of subject.

>Web Standards Project uses an H1 element.
>A List Apart uses an image tag.

I've just thought of one scenario where using an image is less convenient: if you want to apply an a:hover effect to the logo. If you use an image that could be a hassle.

I just checked W3c as well -- they use H1 and image. In the case of W3C though, the logo is the pages main heading I suppose.

I think on my landing pages an image is the most suitable choice. But where the logo is also the heading, like on W3C, a H1 might be better. In fact on the W3C site I don't see why they couldn't have filled the H1 tags with text and used CSS to display the logo, rather than an image, since they're affectively stating that it is a heading. But maybe I'm wrong.

[tedster]

The H1 element, in my view, should be specific to each page - that is, it describes that document's overall topic. By using H1 for the logo on every page, a site is losing one opportunity to send a clear relevance signal for that page.

[Xapti]

Yeah I agree with tedster. I think it's rather strange to be putting H1s on things which are evident, and always the same.

[mattur]

Agree with Tedster. There is no "semantic" way (i.e. syntax) to markup a logo in HTML.

So there is no right or wrong way, it comes down to other factors like possible effects on SEO or accessibility. Note that neither the RNIB nor WebAIM use h1 for their logos.

[PublicSphere]

WebAIM use H1 tags.

The consistency is between W3C, WebAIM and A List Apart in the examples so far, all using H1's and img's.

However I must agree, I prefer using headings for unique descriptions of the page contents, usually coinciding with the title contents.

[ChrisBolton]

I don't agree. You can use <h1> tags for the logo on each page with the logo as a background image. Just change the text on each page, for example:

<h1><a href="home.html" title="Home Page">Example.com - A detailed description of this page's content</a></h1>

Then add a class to either the body or the <h1> tag with CSS something like:

.home h1 {
width: 220px;
height: 100px;
text-indent: -5000px;
background: url(images/body/logo.jpg) no-repeat top left;
}

[tedster]

While there's a certain cleverness in that approach, it also places the H1 text within an anchor tag that points to the home page. That practice associates the H1 for this page with the Home Page itself, and will do so with a different line of text on every page - thousands of pages on the site would mean thousands of different anchor text phrases all pointing to the Home Page. That's very shaky ground.

[edited by: tedster at 4:01 am (utc) on Dec. 12, 2007]

[ChrisBolton]

I thought this was common practice nowadays. I can't think of any other way of putting your logo within the <h1> tag and having your logo linking to the home page, as lots of sites do. In fact, when I started to use this method, my site jumped up higher in the search results on Google. My site has only 20 pages or so, maybe this makes a difference?

[mattur]

WebAIM use H1 tags.

I've just re-checked - they only use h1 for the logo on the homepage, all other pages appear to use a div for the logo, with h1 for page title.

(edited for clarity)

[PublicSphere]

ChrisBolton -- I think that if you are changing the text but not the image on each page it could be construed as misleading. It may help rankings for the moment, but as search engines improve their algorithms your changing text may get caught by a new rule they implement, causing a penalty.

mattur -- I spose that really demonstrates the proper usage. The home page probably is the only page, on which the logo is also the main heading, and I suppose the 'heading' of the whole website. You wouldn’t really want the same heading on every page though, depending on how you view your pages/use your pages.

In terms of SEO, I would probably go for an H1 and text on the home page and and image on the other pages, giving way to a more specifically descriptive H1 in the content. That might be a little inconvenient though if you use includes, like in WordPress.

[ChrisBolton]

As my image in this instance is a background image drawn in through CSS, I'm not sure that is the case. The fact that it links to the same place, maybe so.

[PublicSphere]

Well, actually the method you're using isn't really deceptive (sorry I missed a bit) -- i forgot that you are adding a class to the body to control the logos background image -- that's a bit different; nothing wrong with that I suppose.