SimpleQuiz › Site and Page Titles › Conclusion

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.

Egor Kloos:

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.

Matthew Haughey:

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.

Michael Z.:

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.

Dan R.:

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 title tag 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 background graphic using CSS.
  • h1 should 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.

13 Comments

  1. rick says:

    All these discussions are really great. Learning a lot here. Keep ‘em coming. :)

  2. vick nice says:

    I agree with rick… It’s been very nice to watch and learn. I look forward to the next one!

  3. Tobias says:

    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…

  4. alex says:

    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. :)

  5. Dan says:

    alex – I agree, it’s the quality of the comments that continues to make this valuable. Thanks to all.

  6. Dave S. says:

    What does ‘conclusion’ mean?
    Whoa. A semantic meta-discussion on a discussion about semantics. How incredibly… boring.

  7. Matt Haughey says:

    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.

  8. Dan says:

    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).

  9. Ethan says:

    What if you set the clipping on your #ex1 element (clip: rect(0, 243px, 133px, 0);)?

  10. Ethan says:

    A la this example, perhaps? Works for me in Firebird, WinIE6, Safari 1.0, and MacIE5…

  11. Peter J. says:

    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.

  12. Tim H. says:

    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. :)

  13. Vidar R says:

    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?