Quick Quiz: H1's and Logos | March 18, 2004

Wrapping your logo in a H1. Good or Bad?

Posted at March 18, 2004 9:53 AM

Comments

Ric said on March 18, 2004 9:57 AM

It’s good if the logo (the site title) is the most important thing on the page. Otherwise it’s bad. As a general rule I tend to put the logo in an H2 and have the main page title in an H1.

Michael Heilemann said on March 18, 2004 10:22 AM

I do it, so obviously I’ll vote for good.

sil said on March 18, 2004 10:36 AM

If your logo is the header, then yes. Certainly I think that the logo should be marked up in some way, if it’s a link (and not just a random image).

Mike P. said on March 18, 2004 10:41 AM

That’s a great big “maybe”. The semantics of one tag and how you use it depend largely upon it’s environment.

First though, does the logo “briefly describe[s] the topic of the section it introduces”?

Secondly, will you be placing the logo directly in the HTML or in the CSS?

Tim said on March 18, 2004 10:48 AM

Dan C at Simplebits did a slightly related quiz:

http://www.simplebits.com/bits/simplequiz/#entry577

I would say that on the homepage, your logo’s alt text should be the site title and the logo should be in H1 tags. On all other pages, it should be in a plain old div.

Mike P. said on March 18, 2004 10:49 AM

(sorry for the double, I thought you had ‘preview’…)

The way I develop a page, and have yet to do on our weblog, the logo is generally a link to the home page, so it gets placed in the header, but with CSS. Viewed without style, all you see is a hyperlink pointing ‘home’.

The H1 tag then introduces the main topic of the page. H2 and so on for subtopics (in fact, I posted about this on our blog just this week!).

Jon Hicks said on March 18, 2004 11:22 AM

I’d always done this in the past, as I considered the site title to be the most important. However, I’ve changed my mind fairly recently, and I agree with Mike P - keep h1 for the main page topic.

Ahmaud Templeton said on March 18, 2004 1:19 PM

I am still in the learning process, but I wanted to start engaging myself in these types of discussions to learn more from some of my new heroes. From what I have learned so far, especially after reading Zeldman’s book, is that that wrapping the logo with H1 would be innapropriate. The reason I believe this is so is based on the fact that, like an outline, the logo would be the title of the outline and not one of the main headings. My understanding leads me to believe that this would be semantically correct.

Alastair Campbell said on March 18, 2004 1:45 PM

I’d have to vote no, H1 should be for the main heading of the page, not the site.
Even on the homepage, I can’t see why you wouldn’t have a main heading as well as a logo?

The people that might notice (screen reader users, text browser users) are used to sites having a logo (and a few other things) before the main heading.

Richard Rutter said on March 18, 2004 2:41 PM

I’m definitely in the ‘no’ camp here, unless the logo doubles as the title of your page - only likely on the home page.

Otherwise stick it in a div with id=logo (or similar). The logo is almost never a title, and even rarer still is it a useful one.

Mike P. said on March 18, 2004 2:45 PM

The people that might notice

And the bots that might notice! Semantics are important to bots too, or at least their bosses. Google says so.

Hey Andy, since you don’t have a comment preview, how about something that says what, if any, tags are legal or illegal here?

Isofarro said on March 18, 2004 2:59 PM

Bad. H1 should be about the content of the page, not about the website. This is a mistake I’ve made before too.

Anne said on March 18, 2004 3:22 PM

Bad. Same reason as Isofarro.

(I try to move the page header into the navigation list most of the time.)

soxiam said on March 18, 2004 5:28 PM

I don’t think it’s necessarily good or bad. It’s a design choice that either makes sense for a particular project or doesn’t. In case of your personal weblog, I think it’s a design choice that makes sense to bolster your branding.

Justin said on March 18, 2004 7:35 PM

The logo and branding is closer to META data, so I would avoid it.

Since the content of each pages will focus on a unique aspect, I think it’s important to use H1 to represent the main-heading of each page, or sections within that page. I would expect this would help a spider to determine what the page is really about and help a person to find the site.

If the name and logo are used throughout the site, they’ll still be found by spiders, so it won’t make a difference to ranking if they are not in H1.

I use search engines as my example, but I think it’s about semantecs. It just makes more sense to me.

Chris Vincent said on March 18, 2004 9:22 PM

In a pure semantic sense, bad. The H# elements are made to create an outline structure of the page. In outline form, each time you being a subheading, there must be another subheading on the same level. In other words, you can’t do this:

Level 1
Level 2
Level 1
Level 1

Since the Level 2 heading is on its own, it should be consolidated into the Level 1 heading.

Putting the logo or other image-based header on your site is the equivalent of only having one top-level heading. You are making the top-level heading serve as an outline title rather than a real heading, so it is semantically incorrect. The title element provides this purpose.

Unfortunately, in most browsers, you can’t display elements in the head of a document as part of the body (thought apparently there is a way in Mozilla). Thus, I think it’s okay to switch the use of H1 in until implementation catches up to recommendation. For now, make your own decision. I do it that way (using H1 for the title) because that’s the way I think. Others may disagree.

Indeed, once XHTML 2 is in general use, things will be abstracted into headings and sections, simplifying everything to great extent and providing more flexible ways to structure page content. Some people think XHTML 2 will be disastrous. It’s not backwards-compatible. However, I think sometimes we should tear down and start anew when we don’t want our past mistakes to slow new innovations.

Xian said on March 18, 2004 10:19 PM

I used to wrap the logo in h1s but I’ve stopped.

Currently I use a definition list. I’ve developed a bit of an addiction to them it seems. They are so darned stylable. I use them for contact info, lists of meta information about a page (author, date, etc.) I digress…

For Logos I put the logo/ in the DT and the slogan or tag-line in the DD. Often us image replacing them out of existence with CSS. It gives me three semantic and useful elements which is enough to style most any header.

Erin said on March 19, 2004 2:09 AM

I’ve come up with a small trick (that may or may not work depending on your design) that incorporates both an h1 tag for search engine visibility and a logo image — without either being attached to one another in code.

The idea is simple — h1 tags are present in the markup, yet hidden via css; the logo image is invisible in the markup, but displayed via CSS.

So, for instance, you might have the following:

My web page

Within the stylesheet you would see:

#masthead {
height: npx; /* where n is the image’s height
background: url(/image/masthead.gif) left no-repeat;
}

#masthead h1 {
display: none;
}

This allows the best of both worlds — visitors with graphical capabilities can see your logo. Screen readers and search engines will ‘see’ your h1.

The following is a work in progress, but feel free to check out the code. When the style sheet is present, you’ll notice the logo exists. Remove the style sheet and you’ll see how it degrades.

http://www.zenhaus.net/index2.html

Jeff Minard said on March 19, 2004 3:35 AM

I wrap my site title in a header ie:

<h1> site name </h1>

perhaps with a page title too:

<h1> site : homepage </h1>

If I want a logo there, I add it via CSS. Done and Done.

Brad said on March 19, 2004 6:35 AM

I don’t agree that a logo should be in the H1. HXs and images are semantically and conceptually different, and should be separated as such.

As important as logos are, at the end of the day they’re an image, and should be marked up as such. That way you can have proper data (like longdesc, alt text etc). Apparently Google frowns on images embedded in HXs anyway.

(the rest is OT. Sorry Andy.)
Erin - that’s known as FIR (Farhner Image Replacement), and it’s been around for a while. Check this article for a more accessible version:
http://www.mezzoblue.com/archives/2003/12/12/accessible_i/

Lea de Groot said on March 19, 2004 7:25 AM

A conditional yes - but only on the homepage; I often dont have a separate header for the homepage, so the site title becomes h1 for that page.
Often, it works out well that the logo go inside that h1.
Of course, like all good rules, there are always exceptions.

Tobias said on March 19, 2004 2:54 PM

I do so.
Reason: I want to have a nice outline of my site when only viewing Hx-tags. The w3-validator has such a feature.
And I dont reach this without puttin the headerimage into an H1 since it is the first element on the page.
All other Hx are ordered below…

But I think this is a very tricky theme…

~T

PS: What is your conclusion?

Michael Switzer said on March 19, 2004 4:58 PM

I use h1 to wrap the page banner, not the logo

Mike said on March 20, 2004 3:09 AM

Bad. H1 should be the same as the page title. Too lazy to see if anyone already said this

Erin said on March 20, 2004 4:46 AM

Brad — my bad. Honestly, I had not seen that anywhere else. All the same, hopefully someone found it useful.

Erin said on March 20, 2004 4:46 AM

Brad — my bad. Honestly, I had not seen that anywhere else. All the same, hopefully someone found it useful.

Erin said on March 20, 2004 4:52 AM

Brad — my bad. Honestly, I had not seen that anywhere else. All the same, hopefully someone found it useful.

Andy Budd said on March 20, 2004 2:05 PM

Thanks for all the feedback.

A while ago I had this discussion with a friend. He tends to put the name of the company within the >h1< of each page and then uses image replacement to swap in the companies logo. I’d never even thought of doing this before and personally disagreed with the idea. However his arguments were well thought out and quite persuasive.

His argument was that >h< tags are used to indicate the hierarchy of a document and that the logo/company name was obviously the most important piece of hierarchical information on the page. This makes a reasonable amount of sense, but personally feels wrong to me.

My counter argument was that >h< tags are used for content headlines and that I didn’t feel a logo or company name constituted such a headline. The logo and company name may well explain what site you are on, but its doesn’t necessarily describe/introduce the content of the page.

Looking at lot’s of CSS sites, I’ve started seeing more and more wrapping the site name in an >h1< and then swapping in the logo. As it seems to be a bit of a trend, I was wondering what others thought of the idea. Seems like opinion is about even on the subject.

Robbert Broersma said on March 20, 2004 11:58 PM

A couple of days ago I had a different idea for this problem: I made a very simple website with -elements for navigation purpose and for the logo, leaving for the ‘real’ content. I was quite pleased with the result (I had a working website, with in my view proper mark-up).

I’m wondering what other people think of this kind of mark-up.

Eric said on March 21, 2004 12:12 AM

I’ll put my vote with the content of the page; otherwise the idea of an H1 becomes meaningless - it is the same on the entire site. H1 is supposed to be semantically related to the page content; use it for the main title of the page, and use h^n for the additional sub-page elements. Besides, for indexing purposes, I don’t think it’s a good idea to have the content portion of the page down in the hierarchy. But I don’t really know how Google feels about this…

Stephane said on March 22, 2004 1:47 AM

I do use the H1 for my logo and a H2 for the page section/title only to have a clean outline view of my page :-)

I would remove the logo altogether from the markup (ut the logo as an image somewhere) but I would never put anything before a H1 on my page, it just don’t make sense to me.

kirkaracha said on March 22, 2004 5:48 PM

Bad. The W3C says “[h1] is the HTML element for the first-level heading of a document” and “If the document is basically stand-alone…the top-level heading is probably the same as the title.”

Wilson Miner said on March 24, 2004 3:46 PM

I used to wrap logos in H1s because it was easy to be consistent that way. Then I started doing the logo in an H1 only on the home page, and not on internal pages. Lately I’ve started finding or adding some type of welcome message to the front page that acts as the H1.

What I realized is that even on printed materials, the logo is almost never the rightful top-level header for the content. Even the most generic promotional brochure, if it’s well designed, has some kind of focus or title other than “OUR COMPANY”.

Mike P. said on March 24, 2004 4:03 PM

Hey Andy, for what it’s worth, check out this post, some more thoughts, somewhat on the topic.

Mike P. said on March 24, 2004 4:06 PM

Try that again:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/mar/weblog-update/

justin said on March 27, 2004 9:08 AM

My page title will correspond with the first H2 in the document. I reserve the H1 for the logo first up.

Page Content Heading

Site Logo
Page Content Heading

Seemed like the logical choice, but not so sure the bots will like it so.