SimpleQuiz › Site and Page Titles › Conclusion
A notebook entry published on September 15, 2003
This question was probably the most vague — and there certainly wasn’t a clear-cut right or wrong answer. But that’s why I like it. I enjoy hearing what others think about the relationship of the title and h1 tags.
Notable Comments
Many agreed that ceejayoz’s example was the best-case scenario, which was most like answer A:
<head>
<title>Widget Co, Inc. | List of Widgets</title>
</head>
<body>
<div id="logo">
Widget Co, Inc.
</div>
<h1>List of Widgets</h1>
I think I’m with ceejayoz here, and it’s certainly closest to what I’ve used in the past.
H1 is a heading and isn’t a logo. A logo isn’t a Title and also isn’t a Heading. … A logo or even just a company name is not just a line of text, it is part of a companies assets. Treating it like it is a Title or heading and putting it in a H1 tag is a mistake…
Good points on a logo not being a heading.
Why put the same exact thing in an H1 on every page, making search engines think it’s the most important thing on the page, when it’s mostly just eye candy?
Search engines weigh h1 heavier than h2. Putting only the company name in there might be a waste.
But in terms of your page’s hierarchy, the <title> is like an <h0> that’s applied to the <html> element. Why repeat its content in your <h1>?
I like the h0 metaphor.
How I would do it today:
<html>
<head>
<title>Page Title | Company Name or SiteName.com</title>
</head>
<body>
<div id="logo">
<p>Company Name, replaced by Logo graphic using FIR (or related technique)</p>
</div>
<h1>Page Title</h1>
<h2>Subheading</h2>
<p>Content</p>
</body>
</html>
A nice, complete example — and I agree with it all.
Summary (my take)
Here’s what I think, after hearing from you highly esteemed readers:
- The
titletag should contain the page and site title. - The logo doesn’t need to be a heading, and may live nicely in a div where it could be replaced with a
backgroundgraphic using CSS. h1should be the title that most completely describes the document as a whole. This may or may not include the site title (again).
In the past, I have sort of tried to adhere to that. But going forward, this seems to make sense in an ideal world.
rick → anythingapplies.com
All these discussions are really great. Learning a lot here. Keep ‘em coming. :)
vick nice → sprungMind.com/
I agree with rick… It’s been very nice to watch and learn. I look forward to the next one!
Tobias
What does ‘conclusion’ mean? The way you conclude is like desiding what the majority seems to think an describe this. The way I understand it, would describe alternative solutions (or just point to them) as well. So more like a summary that might gives a direction the majority uses…
alex → www.alexking.org/
One of the reasons I think we’re all enjoying these so much is the constructive manner in which everyone is taking part in the discussion. Kudos to Dan and his readers. :)
Dan → www.simplebits.com
alex - I agree, it’s the quality of the comments that continues to make this valuable. Thanks to all.
Dave S. → www.mezzoblue.com/
What does ‘conclusion’ mean?
Whoa. A semantic meta-discussion on a discussion about semantics. How incredibly… boring.
Matt Haughey → a.wholelottanothing.org/
Dang, this puts a wrench into things: I just found out that Mac IE 5 can’t do image replacement on anything other than header elements.
Dan → www.simplebits.com
Matt - Hmm, interesting. Looks like using p works, which could be argued as an even a better element choice for replacing a text logo. The unstyled view will certainly format nicely.
Or, there’s always the Fahrner Image Replacement method, which despite getting a (probably deserved) bad accessibility rap, is pretty bullet-proof (CSS-wise).
Ethan → www.sidesh0w.com/
What if you set the clipping on your #ex1 element (clip: rect(0, 243px, 133px, 0);)?
Ethan → www.sidesh0w.com/
A la this example, perhaps? Works for me in Firebird, WinIE6, Safari 1.0, and MacIE5…
Peter J. → peterjanes.ca/
Regarding the <h0> metaphor, I saw this trick used in an experimental context several months ago:
<html>
<head>
<title>Page Title</title>
<style type="text/css">
head { display: block; }
head * { display: none; }
title { display:block; }
</style>
</head>
<body>
<h1>First Heading</h1>
</body>
</html>
As I recall it’s not particularly browser-compatible: it works in Gecko but not IE, for example.
Tim H. → www.timhansonjr.com
In the above example, I would structure the title with the company name first, some sort of seperator, and then the page title. This way if a user has two pages from the same site bookmarked they are next to eachother in their alphabetized list.
Just my 2 cents on an old topic. :)
Vidar R → www.vidarramdal.com
I’m not sure I agree with
“The logo doesn’t need to be a heading, and may live nicely in a div where it could be replaced with a background graphic using CSS” (my emphasis)
Wouldn’t the logo be considered “information” (not just style), and thus be declared as an img element?
Comments have been closed for this entry.
A tiny web design studio founded by designer and author Dan Cederholm. We deliver hand-crafted pixels & text from Massachusetts, USA. Learn more
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of Ed
Add your own
13 Comments