SimpleQuiz › Part V: Site and Page Titles

Our first reader-submitted quiz question from Thomas Lackner:

Q: Which is more semantically correct for a corporate web site (that does not require an image-based logo)?


  1. <div id="logo">
    Widget Co, Inc.
    </div>
    <h1>List of Widgets</h1>
  2. <h1>Widget Co, Inc.</h1>
    <h2>List of Widgets</h2>

  3. <head>
    <title>Widget Co, Inc.</title>
    </head>
    <body>
    <h1>List of Widgets</h1>

This was touched upon in the comments of the first question, but I think it would be
interesting to get people’s opinion of what a best case scenario would be for the beginning structure of a document. Obviously, logo graphics play a part in
most corporate sites — but we’re strictly talking page structure here. Thanks to Thomas for sending this in.

32 Comments

  1. web says:

    I think C. I believe the main goal here is to make sure SEO is correctly listing the page. Title is reserved for the company name and purpose and then the H1 is for the specific goal of the page itself.

  2. Bryce Benton says:

    A similar question arose last week when I was preparing a works cited section for a paper. I asked my instructor whether I should cite the title named under the title tag or the title named under the h1 tag. She suggested that I cite the title that appears on the page (meaning the content of the h1 tag in this case).
    My opinion is that the content of the title tag and the topmost h1 tag should be identical… or if the title tag shows a cookie trail, the last morsel should be identical to the topmost h1 tag.
    As for the quiz, I would prefer the company’s name to appear in both the title tag and the topmost h1 tag.

  3. Bryce Benton says:

    After reading web’s comment, I feel I should clarify. I say C, but even better would be that the title tag includes both the company’s name and the page title. (That’s what I meant to say originally, actually.)

  4. Ryan Parman says:

    I’d have to agree with Bryce here. Personally, I have Site Name with Page Topic in the <title> tag, and <h1> is used for the site name again. All topics are created with <h2>, while subtopics are <h3> and downward.
    That seems to make the most sense to me, as you move from most general (<h1>) to more specific (<h4>).
    I’d say B+C.

  5. I would use a combination of B and C:

    <head>
    <title>List of Widgets | Widget Co, Inc.</title>
    </head>
    <body>
    <h1>Widget Co, Inc.</h1>
    <h2>List of Widgets</h2>

    If no graphics are involved, you’d probably want the company’s name to appear at the top of the page as well as in the title. The page title appears in the title tag before the company name for SEO purposes.
    On a side note, these quizzes have been really helpful. I have started to design pages structurally before working on how the site will look visually. It’s helped me eliminate a lot of extra tags. Thanks!

  6. Jai says:

    Out of these choices I like C. B is good, and Google would like it, but not as much as it would like C – because the Title attribute of a page is the end all and be all of what that page should contain- H1′s are just what they should be- page Headers (not page titles).
    But I do like the B+C best because it’s the best of both worlds. So I pick choice D, B+C

  7. ceejayoz says:

    Combination of A and C:
    <head>
      <title>Widget Co, Inc. | List of Widgets</title>
    </head>
    <body>
    <div id="logo">
      Widget Co, Inc.
    </div>
    <h1>List of Widgets</h1>

    The site’s logo should show up somewhere, but <h1> should remain reserved for the title of the document. Using a <div> for the logo allows the site to have the logo while keeping the document title as <h1>.

  8. Minz Meyer says:

    I’d vote for B, assuming there is a page title as well (there should be one if it is XHTML).

  9. Mark Wubben says:

    I choose for D (B + C)!
    ceejayoz said:
    “The site\’s logo should show up somewhere, but <h1> should remain reserved for the title of the document. Using a <div> for the logo allows the site to have the logo while keeping the document title as <h1>.”
    Why not put the “company name” in an <h1> and use CSS for the logo? Using LIR of course.
    Then the <h2> will be used for the page title.

  10. Keith says:

    As some others have stated, I’d go with D (B+C). The way Mike A. illustrates it is best.

  11. Egor Kloos says:

    As ever the provided answers leave the door wide open to interpretation. But having no other choices than these three and going strictly with the information given I’d go for answer A.
    … By the way Dan isn’t inciting a riot across state borders a Federal offense? ;) … Anyway …
    H1 is a heading and isn’t a logo. A logo isn’t a Title and also isn’t a Heading. That quite simply rules out answers B and C. Now answer C does provide us with a neat TITLE solution but actually still makes the same fundamental mistake that we see in answer B, a logo in an H1 tag.
    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 and show a complete lack of understanding in the value of branding. Branding elements are not part of the content and shouldn’t be treated that way. Answer A actually allows for it’s inclusion without making it a part of the content. If you did have a graphic you then wouldn’t need the DIV at all. You could use the TITLE tag as in answer C and place the graphic in a background using CSS.

  12. I built the Creative Commons site to follow essentially Mike A’s (B+C) option, but I have gotten feedback from people asking if the site’s logo is really the most important piece of information on the page.
    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? (or only correct on the front page)
    Like I said, I got some pretty convincing arguments against B or a B+C option, so I’m starting to lean towards A actually.
    (yay for ambiguous questions that challenge our beliefs!)

  13. I usually use B. But maybe I’m going about it in a very different way for my own website.
    I use H1 for the site title, just like in B. But in addition, I add an H1 heading for the various DIV sections I have, such as Navigation, Content, and Footer.
    <body>
    <div id="header">
       <h1 id="logo">Company Name</h1>
       <h2>Page Title</h2>
    </div>
    <hr>
    <div id="content">
       <h1>Content</h1>
       <h2>Posted Entry #1</h2>
       content stuff
       <h2>Posted Entry #2</h2>
       <h3>nested stuff</h3>
       <h3>nested stuff</h3>
    </div>
    <hr>
    <div id="navigation">
       <h1>Navigation</h1>
       navigation stuff
    </div>
    ...

    I use this to help non-visual browser identify the various sections (which don’t have any nicely styled columns or background colors for bearing). And for modern visual browsers, I have set CSS to display:none for the non-logo headings (and for HRs as well). Each DIV section has it’s own hierarchy of Hn headings.
    Try a CSS Toggle bookmarklet to see what I mean. And in Opera’s Small-Screen Rendering option (Shift+F11), it’s much easier to traverse the various headings with the W or S shortcut keys.
    With my site, the top-most headings are used more as a way of showing site structure, rather than the heading or title of the content itself.

  14. Keith says:

    You know, now that I look at it again, I don’t think any of these are exactly right.
    On this page, a list of products, the <title> and the <h1> should contain the words “List of Widgets”. So Mike A’s is close, but not quite right.
    I don’t think A is quite correct because the logo is kind of a non-issue in my mind. If the logo is a representation of “Widget Co, Inc.” it could be marked up with an <h1> if you used that as your title or in a <div> if you didn’t.
    Could you have two <h1> tags? One for the logo and one for the title of the page? That is the way I do it on my site. One <h1> for the “logo” and one for the title of the page.
    Not sure if that makes sense either, but it seems to be working fine. I think the most important thing here is to make sure your <title> has the most relevant information. As long as you have that, while you might not be semantically correct, you should be in good shape.
    I think. ;)

  15. Dave S. says:

    Context is everything, so if and only if ‘List of Widgets’ is the title of the current page, then your answer is A.
    The W3C says to use <h1> for top-level headings, and while that particular document leaves open the interpretation of what exactly those headings should be, I believe the ideal is A, with a bit of help in the title tag.
    ceejayoz’s code is the best answer. Egor’s explanation of why is bang on.

  16. Michael Z. says:

    I agree with ceejayoz and Dave S.
    I always make sure that the <title> tag identifies both the page and the site. Remember that this is an important element of your site’s interface that’s mostly used off of your site. There’s good discussion of composing title tags at Page titles on news article pages | Holovaty.com.
    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’ve struggled with using additional <h1>s as starvingartist suggests. My navigation doesn’t fall under the topic of “widgets,” so why head it with an <h2> or a <strong> which falls within my <h1>’s scope? But elevating navigation to an <h1> makes Google think that my page is about navigation as much as it’s about widgets.
    I’ve settled on using a <div> to indicate the scope of a heading. I tell myself this is analogous to the way XHTML 2 treats the <section> tag, although it’s not really as explicit.

    <div id="content">
      <h1>List of Widgets</h1>
     
      [list]
     
    </div>
     
    <div id="navigation">
      <h2>Navigation</h2>
      [navigation]
    </div>

    (I sure hope XHTML2 doesn’t deprecate h1-h6 — how else can we designate a heading as the most important on the page, but not applying to navigation links?)

  17. Jesse Wilson says:

    I would say A or C. I have started using a variation of A anc C combined. In the <title> I place the site/company name along with the page title (primary topic). Preceeding the (first) <h1>, I place a single <p> that contains the name of the site/company (usually with an <em> or <strong>). Then I place the title of the page in a <h1>.
    The site/company name does not interfere with search engines and the primary topic is easily identified, while the site/company name is still visible as such.

  18. It completely depends on the title of the page and the content the page contains. So I would say D, more information is required.
    As ceejayoz said, h1 should remain reserved for the title of the document. And Egor’s comments the company name/logo are right on the mark.

  19. Hmmm… some good cases for not using <H1> for site titles. My question is what would you do on a page like a weblog, where there may not be a page title but, instead, several headlines? What about sub-pages with archives?

  20. I’d go for B or C … but it’s a tough call

  21. ceejayoz says:

    Mike Aparicio said:
    Hmmm… some good cases for not using <H1> for site titles. My question is what would you do on a page like a weblog, where there may not be a page title but, instead, several headlines? What about sub-pages with archives?
    On my site’s main page, which has 8 entries shown, the <h1> is “Blog . Latest Entries” – the several headlines are <h2> headings.

  22. Tobias says:

    I go with ‘Mike Aparicio’.
    Some Ideas why:
    1. I don’t understand why it is important if Company-Logo is a Image or not. There are good methods with CSS so combine text with image. I would use them.
    2. I believe that page-title an HX-Structure don’t have much in common.
    2.1 Page title should be good for bookmarking. So in most cases use [title]Site-Theme, Company Name[/title] but there might be cases, the switched order might be better…
    2.2 Creating the HX-Structure for my Site I think of the site as an outline (like the validator supports us to do). And if I’d had to write such an outline, my site would start with the h1 site-title, h2 artikel-headline, h3 sub-orders. Mostly my Sites become additional h3 for boxes like “recent artikel about that” or something so this belongs to level h2 (artikel).
    Additional h1 are possible as well e.g. for administration-boxes that are the same structural level as the site itself (since they admin the site).

  23. Niket says:

    I am inclined to go with ceejayoz’s structure. The title of the document should make sense when it stands alone (as in bookmarks). So definitely, the title will be something like
    “List of Widgets, Widget Co Inc.”
    I guess most agree until this point.
    The next question is: should I
    <h1>Widget Co Inc</h1>
    or not? To answer this, I ask myself: Is the logo (may or may not be an image) a part of the current document? No its not. This document is about the widgets that Widget Co Inc is trying to market/seek. Is the name of the company the heading for a memo? Hence, <div id=”logo”> sounds more appropriate to me.
    <div id=”header”>
        <div id=”logo”>Widget Co Inc</div>
        <h1>List of Widgets</h1>
    </div>

  24. Egor has the best answer (again?). Most of the times I do it different then he says, but he’s right, both B and C are wrong.
    (I sure hope XHTML2 doesn’t deprecate h1-h6 – how else can we designate a heading as the most important on the page, but not applying to navigation links?)
    Using the NL element with the LABEL sub-element of course. W3 is offline at the moment, but you should be able to locate more info here: http://www.w3.org/tr/xhtml2/

  25. Ed Sharrer says:

    Answering the quiz before I read the other answers…
    I’d say B. The name of the company should be the most important headline so search engines index it properly.
    However, C does the right thing by putting the name of the company in the title of the page.
    Can there be a D? A combination of B + C?

  26. Niket says:

    The point where I disagree with Egor is “You could use the TITLE tag as in answer C and place the graphic in a background using CSS.”
    If that were implemented, all the Widget Co Inc pages will have the same title “Widget Co Inc”, which is the company name, not page title.
    If the specific list of widgets is well known to belong to Widget Co, only the “List of Widgets” title is enough (eg everyone knows Windows belongs to MS). If not, “List of Widgets – Widget Co Inc” sounds more appropriate to me.

  27. grog says:

    hrrmmm.
    me thinks A and C best answer.
    keep logo separate. save bandwidth for content.

  28. Ali says:

    “a good title” (http://www.w3.org/Provider/Style/TITLE.html), in the Style Guide for online hypertext by Tim Berners-Lee, 1992 talks about title of a “document” which is a property of the whole document. I usually interpret a web page as a document therefore unique title at each page is more appropriate, (Mikes’ suggestion) to add company’s name to the title is a very good idea.
    As far as Headings and an approach, I agree with Dave to use for top-level headings and with ceejayoz’s answer to the question.

  29. Egor Kloos says:

    Niket,
    I agree that the title shouldn’t contain just the logo. That wouldn’t make any sense. The title tag should contain the page title or document title. What I meant to say was that the title tag could also contain the companies name. As seen in Mike’s and ceejayoz’s example. Somehow I must have mixed them up and I also think many could have read it that way as well. Though it is not unimportant to mention my slip of the ‘keyboard’. The use of the title tag merits a bit more care than most tags.
    However, my main point remains. Both answers B and C are wrong for the reason I’ve already given.

  30. Justin says:

    Sadly I think this comes down to a “search engine way” versus the “right way.”
    The “right way,” for me, would be A. The “search engine way” would be a combination of B and C.

  31. Dan R. says:

    Of the options given: A
    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>

    But if you ask me tomorrow, I might have a different answer — sometimes it depends on the project.

  32. theUg says:

    I mostly agree with ceejayoz, Egor Kloos, Dave S., and others who supported it. Whether to put a company name in the page [title] is a technicality. The principal thing is that header/logo/company name is not a part of the document itself, but merely identifier of pertinence to a certain company in given context.
    When you open the book, you have a title page with the name of the book in hefty lettering. Then, on all subsequent pages you will not see it. There might be indications in the top running title (that is how Яndex translated words колонтитул, Kolumnentitel, titre de colonne, titolo di colonna etc.), but not much more.
    So, that is what it is—the running title, therefore it should not be put in [h1] tag, for it does not represent the structure of the document, but acts as a branded stationery.
    * * *
    There should be only one [h1] on a single page (document) if I am not mistaken.