SimpleQuiz › Part I: Headings

In response to Jason Kottke’s post on semantics and markup, I thought I’d try out a new series here called SimpleQuiz (I know… but it’s better than “Markup Quiz” or “Web Standards Quiz”). The objective is to ask some questions about markup and generate some discussion about preferred methods.

I may very well become either too busy or bored to continue these on a regular basis, but we won’t know until we begin. The hope is that these questions and answers would become useful little bits of information. I also won’t pretend to be the authority on any of these subjects. I may very well be asking the question because I’d like to hear how others would handle it as well.
So here goes… the first one is a doozy. Sure it’s incredibly obvious — but we have to start somewhere, and should probably make no assumptions.

Q: Which of the following is more semantically correct? (For the title of a document)

  1. <span class="title">This is a Title</span>
  2. <h1>This is a Title</h1>
  3. <p><b>This is a Title</b></p>

69 Comments

  1. vlad says:

    either it’s B or this is some sort of trick question ;)

  2. Dan says:

    Heh heh, no trick questions (yet). OK, it’s an easy one. B.
    Why is it better? One reason: the tag h1 will be recognized in new browsers, old browsers, phones and PDAs. A second benefit is that (some) search engines look specifically to heading tags for keyword placement.

  3. Zach says:

    Well, I would say that it is B, but I am guilty of using choice A more often than not. ;)

  4. vlad says:

    not just some search engines, dan, *the* search engine.
    plus, if the site is being viewed with a device or browser with no css support, the heading will still look like a heading, albeit an unstyled one.

  5. B. Because the XHTML document should be referred to as a document and if it is a header we are using and that header is the first of the document then semantically it should use the h1 tag.

  6. aliotsy says:

    B. Raises a point though…is there a way to assign semantic value to a span? For example, a way to define the class title as more important than the class bodytext.

  7. maiko says:

    it is not fair, some people have answered and the give the right answer! :-)

  8. Sunny says:

    B is the semantically correct approach although A will be valid mark-up.

  9. talon says:

    That will teach me not to preview. <title>This is a Title</title>, even.

  10. Dan says:

    Sunny – I think you’ve just nailed it, and this was at the heart of what Jason Kottke was getting at earlier. Using the span method is perfectly valid — but to use a heading tag is a better choice.

  11. Paul G says:

    Hell, they’re all valid XHTML. The point (and I think what Dan is oh-so subtly trying to get at.. :) is that we can break them into varying degrees of Goodness(tm) based on criteria other than whether they validate.
    Using <p><b>…</b></p>, while perfectly valid, is semantically awful. It conveys no meaning about what is between the tags.
    Using <span class=”title”>…</span> is better because it conveys meaning, but is not the best choice because we are using a generic tag for a case where there’s already a specific tag we can use.
    Therefore, <h1>…</h1> is the best choice because it conveys meaning and uses the most specific tag possible (and it’s a few bytes shorter).

  12. MikeyC says:

    <p><b>This is a Title</b></p>
    Why is <b> even part of the XHTML spec? It’s completely presentational.

  13. huphtur says:

    Nobody is picking D?

  14. The heading tag is a much better choice for all the reasons Dan mentioned, plus it saves you a few small bytes as well. ;)

  15. Andre Leistner says:

    It’s interesting to see a quiz on semantic markup being marked up using non-semantic markup (div and span). You could have used an for the choices.

  16. Priit Laes says:

    I prefer the b. It’s cleaner, shorter and makes more sence.
    PS. Nice topic, Dan! After your quiz is over, it would be nice to see “The n (n is the number of questions you ask) commandments of a web designer” :)

  17. Jeremy says:

    I would use B. Since thats what Zeldman told me to do. ;)

  18. Peter says:

    The semantically correct must be <head> <title> This is the title</title> <head> and the B ;o)

  19. Russ Weakly says:

    damn, I always thought the most semantic option would be something like:

    This is a Title

  20. Great idea, maybe you should use an ordered list for the answers ;)?

  21. Andrew says:

    One thing though… although you should use H1 for a title, what title are you referring to? Many sites use the H1 tag to display the site title, often replacing the text with some background image or other, and use something else for the page title. Semantically, should I use a DIV for the site title, and an H1 for the page title, or H1 for the site title, and something else (H2?) for the page title?

  22. Jerome says:

    Then which title is better ?
    <h1 id=”fir-bg-image”>This is a title</h1>
    or
    <h1><img src=”title.png” alt=”This is a title” /></h1>
    ?

  23. Dan says:

    Paul G. – Well said.
    Andre and Anne – Touche ;) And you’re absolutely right. This should be an ordered list. And now it is. Thanks.
    Andrew – I should have made this clearer. I wasn’t referring to the <title> tag within the <head> of the document, but rather the main heading that would show in the content area of the browser.

  24. LintHuman says:

    Hmm. I would generally use <h1></h1> for the first heading on a page. This may well be the document title, but it ain’t necessarily so. I try to make sure that a page’s title is in the <title></title> element. If it’s repeated in the first <h1></h1> then so be it.

  25. Giannis Tsagatakis says:

    A. Only A cope with semantics. We know that it is a Title and formats like a Title (somehow).

  26. Jeff Croft says:

    Jerome-
    I’d say they’re equal, and their use depends on situation. The basic point of FIR is to hide images from simpler browsers, especially images that are soley presentational, and contain no useful content.
    In your example, we can’t see the image, so we don’t know what it’s prupose is. If it’s a small logo that will display well in a “mostly-text” reader like a cell phone or PDA, then I’d use the IMG tag. if it’s an expansive header image, 750px wide and full of design elements besides the basic logo/text, then I’d probably use FIR and keep it hidden from simpler browsers.
    In either case, the markup is valid, and Good(tm). It just depends on the situation.
    Jeff

  27. Bob says:

    I try to approach it in this fashion: If viewed completely unstyled, does the page look more or less like an outline, with headings, subheadings, etc.?
    If so, I know I’m probably pretty close. :-)

  28. Seamus says:

    Here is a question I have. Which is better having the name of the site or the title for the current page in the h1?

    <h1>Site Name</h1>
    <h2>This document</h2>

    OR

    <div id="site-banner">Site Name</div>
    <h1>This document</h1>

  29. Yoki says:

    H1 – it has to be h1. If for no other reason than for the fact that that is the way the search engines would like to see it.

  30. Andrew says:

    Dan – what I was asking is what Seamus asked, although he put it somewhat more coherently!

  31. Dan says:

    Seamus and Andrew – Great question. Ideally, I believe using h1 and h2 would be more semantic — however I’ve used the div and h1 combo more often.
    Another way to look at it is that h1 might make more sense reflecting the page title and not the site title.
    I don’t have a definitive answer for this one — does anyone have a more scientific opinion?
    A simple question starts to get slightly complicated, doesn’t it? ;)

  32. Andrew B says:

    I was swayed to using the DIV/H1 combination mainly due to the search engine indexing issue, and it seems to make sense. After all, a site name really doesn’t describe a document in any way – it’s just branding.
    Mind you it does mean I have to reorganise all my sites to stop using H1/h2 and change all the other H tags to be one higher!
    Just my 2p :)

  33. By no means is my opinion scientific, but I would say you should use h1 for the site title and h2 for the page title. Using a div with styles turned off, the site title would look like regular text, and the page title would be the default h1 size. Whereas if you used h1 for the site title and h2 for the page title, the sizes of the headings would make more sense.
    Of course, looking at my own site, I just realized I use a div for my site title. (Oops!)

  34. Egor Kloos says:

    Here’s me thinking that a title was <title>, altough for the main page header I would use option B.
    H1 is a header and that’s where I’d put my main heading. My main page header is not a document title. You could use H2 for the page header if it isn’t on the first page in a series for example. It’s typography 101.
    Slightly OT here, but it keeps on poping up. <strong> is not <b> and it isn’t a replacement. I don’t understand how this got into being. <strong> lends it’s context from the content in where sits. <b> is a purely a typographical tag, and helps to users scan a page visually for relevant information. It’s not tied into the context of the paragraph, but to the page as a whole. I’m not sure but I think that screenreaders treat them exactly that way too.

  35. Paul G says:

    I really think that <h1> should always contain the document title, with the site title being optional. Imagine printing out the document with no styling. The first thing you expect to see (ok, the first thing I expect to see, at any rate) when you look at the page is the document title. It makes sense to look at the page and see “Dancing Habits of the Capybara” or even “Capybaras.net – Dancing Habits of the Capybara”, but if all you see is “Capybaras.net”, you cannot immediately deduce what the document is about or whether it is relevant to what you are looking for (although you are pretty sure that it has to do with capybaras :). This goes hand in hand with my next paragraph:
    I think Bob makes a good point about thinking of your markup as an outline. I also try (emphasis on “try”) to think of my xhtml as an outline, mainly because it’s a format that we’ve all been familiar with since elementary school. Even if you’re not familiar with outlines, they are intuitively easy to search: Is the document title (<h1>) relevant to what I’m searching for? If so, scan main headings (<h2>) for an area of more specific relevance. Repeat through sub-headings(<h3>,<h4>,etc.) until you find what you are looking for. Compared to searching through one long block of text (even broken into paragraphs), it is trivial to find what you are looking for with an outline.
    Making data accessible is what the web is all about, but we miss the point sometimes (or in my case, most of the time) when we write our markup. If we make our data easily searchable by humans, no matter what the interface they are using, imagine how much easier it is for non-humans (or rather, THE non-human *cough*Googlebot*cough*) to index our data in a relevant fashion. Not only that, we take huge leaps in forward compatibility. Not only is your markup valid and parseable, it describes itself for future generations who may or may not know what HTML is.
    Ok, stepping away from the soapbox now…

  36. kirkaracha says:

    The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.

  37. Keith says:

    A little late to the game, but B is correct semantically (at least in most cases – it could change depending on the context I imagine) and the other two would still be valid XHTML.
    As far as the last few comments on h1 use for title. I would always us it as the title of the *page* not the site, unless we are talking about the *home page*.
    That same guideline follows for the actual title tag.
    You can put the site name into the title tag, but I think it’s much more useful to a reader (user) to have the name of the page in there. If you have both put the page name first in the title tag as it’s the most relevant information and then repeat that for the h1.
    This is much more useful to search engines as well – they’ll find the actual content of the page, not just the name of the site.
    Fun quiz by the way…

  38. Submunition says:

    I am going to say B. Most semantically correct, most structurally perfect, and nicest to search engines.
    Good idea, these questions. Keep it up sir.

  39. Mike says:

    Paul G:My browser prints the contents of the Title tag in the top left corner of the paper so whilst it may not visually stand out it is the first thing on the page.
    Generally:I think you have to be very careful with terminology here. The word ‘document’ in the question really refers to the ‘content’of the document. The document is everything that appears in the .htm(l) file, html tags included, so, pedantically, between the title tags is where the title should be, though it should be used to describe the content of that document.
    Anyway does this mean that the h1 tag only appears once (given the way some non-styled UAs display it, probably not a bad thing). Presumably, the content may contain more than one topic so couldn’t reserving h1 for just a title compromise your Search Engine Optimisation or am I being too finicky.
    Finally, my answer to the question-as -intended is B.

  40. ray says:

    I’d have to say “B” . Semantically it makes more sense.
    is # 1
    is # 2 …

    and are somewhere down the line…regardless of styles.

  41. ray says:

    I’d have to say B “h1″ . Semantically it makes more sense.
    “h1″ is # 1
    “h2″ is # 2 …
    “p” and “span” are somewhere down the line…regardless of styles.

  42. travis says:

    B

  43. B.
    Warning: reading beyond this point may give out SimpleAnswers to future SimpleQuiz questions! Continue at your own risk.
    For headings, use h1 – h6.*
    For paragraphs, use p.
    For lists where the order isn’t important, use ul and li.
    For lists where the order is important, use ol and li.
    For lists where you’re defining something, use dl and dt.**
    For quotes, use blockquote with a cooresponding cite attribute.
    For links, use a with a cooresponding title attribute.
    For bold text, use strong.
    For italic text, use em.
    For citations, use cite.
    Use table, td and tr for tabular data only.
    Use div and span to 1) style sections of content, 2) add generic structure to the document, or 3) when warrented by lack of CSS support.
    Use of any elements instead of or in addition to those listed above (for the cooresponding purpose) will reduce the semantic quality of the document. It’s that simple.
    *As we learned above, heading elements can also be used for titles.
    **Things that can be lists include: navigation, metadata, and more than two of anything. However, it’s the author’s opinion that using list markup for inline lists in a sentence such as the preceeding one is taking semantics too far.

  44. TOOLman says:

    I agree with what Joshua Kaufman says, except for two things:
    “For bold text, use strong.”
    “For italic text, use em.”
    I’d say:
    “For bold or italic text, use CSS.”
    “For emphasis, use em.”
    “For strong emphasis, use strong.”
    The fact that strong and em are rendered as bold and italic, respectively, by major browsers, does not mean that they are subsitutes for those styles. They are semantic elements. They can also be important for accessibility, by providing hints for screen readers.
    BTW: Nice initiative! :)

  45. michael says:

    B. And thanks to Zeldman’s book, I know that. :)

  46. Jim says:

    B: obviously, the tag conveys meaning on many levels and makes redundant the ‘tag soup’ that is a & c

  47. B
    I like this. ;-)

  48. Egor Kloos says:

    I agree with Toolman that <Strong> and <em> are not the same as <b> and <i>, as I stated above. I personally still need to be convinced that tags like <b> should be dropped in favor of CSS styling. Most webpages are made primarily as a visual document so using such tags is fine in my view. Just like using a <table> is for tabulated data.
    The proper application of <strong> and <b> tags can be tricky because it requires those building the site to have read and to have understood the contents meaning. Differentiating between emphasis and typography should in any case be made clear by the contents author. Those in Direct Marketing already distinguish between the two but don’t always let the production team in on it.
    Alas many CMSs do not offer the editor a choice in the matter. I’m sure some do but don’t ask me which ones because I haven’t got the foggiest.

  49. Greg H. says:

    <h1 id=”title”>…</h1>

  50. Rich says:

    Although late, I’ll lend my own couple of cents because nobody seems to have mentioned my reasons…
    The title of any document, much like the headline of a newspaper, implies an implied carraige return. That is, small body text doesn’t follow the headline. This creates a block element. Therefore, span, an inline element, isn’t correct. Thinking of items with an implied carriage return goes far in separating block (h1-6, p, ul, etc.) elements from inline in my mind, anyway.
    And while a paragaph with bold tags could be substituted, it’s been said many times (here and elsewhere) that bold tags say nothing about the content of the item, in this case, the paragraph. The bold tag is deprecated and should be avoided at all costs.
    So B it is.

  51. Markku says:

    Is it B? I didn’t look at the others’ ansewers! :)
    Seriously, more of things like this will be beneficial for those just learning HTML, maybe the next generation of web designers will produce meaningful code right at ah the beginning. Let’s just hope they don’t meet some smartass sharing them “the secret power of tables.”

  52. Millennium says:

    Re assigning semantic meaning to classes:
    You could write your own user-agent -be it a browser, search engine, screen-scraper, or some other bot- which looked for classes on tags and did something with them. In the end, that’s all that “semantic meaning” is: it means that a user-agent knows what to do with a certain tag or attribute.
    However, there is no standard way for adding semantic meaning to tags in already-existing user-agents. There are some engine-specific tricks you could use; Gecko’s XBL is a good example. JavaScript can also be made to do something like this; in an onload handler you’d parse the tags in the document and look for tags with the attribute you wanted, and then do stuff based on that. However, this is all dependent on whether or not the user-agent visiting the site supports the technology you’re using. There is no way, for example, to add semantic meaning to tags or attributes which will be comprehensible to Google.

  53. Michael Z. says:

    One more thing to consider about the H1′s role on the page is its context. The H1 heads any text that comes after it, unless another H1 is encountered.
    This implies that text coming before the H1 is ‘outside’ of the page topic. I guess it’s not explicitly identified as info about the web site. But if it appears on every page and always links to the home page, then I think Google will consider it significant.
    So how do we mark up marginalia at the bottom of the page that refers to the whole web site? One solution is to identify the body using a div.
    <p><strong>Site title</strong></p>
    <div id=”content”>
    <h1>Page Title</h1>
    the stuff this page is about…
    </div>
    site copyright stuff

  54. ess says:

    You didn’t tell me who this document is for – both who is expected to read it and who will be maintaining it. Knowing the client and the audience, along with settling issues raised by others, would help me pick between A and B.

  55. Steven Price says:

    It has got to B. A screen reader would only be able to distinguish a header as formatting is in the form to .
    The real test of whther a document is structurally correct is whether the markup makes consistent sense to software which has no tacit knowledge gained from visual stimuli (unlike human beings).

  56. Ryan says:

    I’m unsure of how people are using the term “semantic” here. Semantics are the categorical organization of meanings attributed to elements. Hence, I vote for line 3 of the following:
    1 <html>
    2 <body>
    3 <span class=”title”>Title</span> …
    4 </body>
    5 </html>
    Lines 1-5 define a document structure for this instance of a document. Similarly, H1 could be on line three, but it only conveys relative position within the hierarchy of objects in the instance. Line three is saying “The element “span” (and its associated textual content) is of the class “title.” It doesn’t matter what the W3C says or what Google searches for. They are trying to associate the structural element H1 with the conceptual category of titles. That’s a hard-coded assumption they are making. Its semantics by convention.

  57. Ryan says:

    The best solution is to use
    <h1 class=”title”>Title</h1>
    Document structure and semantic structure happily married.

  58. iva koberg says:

    If content is stored in HTML/XHTML, I’d definitely agree with Ryan:
    <h1 class=”title”>Title</h1>
    If you go further and store content in XML, then you can granularize semantically to the level that makes sense in specific situations and render appropriate HTML.
    For example:
    <documentTitle>This is the main title</documentTitle> or <sectionTitle>Section title</sectionTitle>, etc.
    and render as:
    <h1 class=”title”>Title</h1> or <h2 class=”subtitle”>Title</h2>

  59. Thomas says:

    I’d have said This is a Title

  60. Tom Flemming says:

    I am always intrigued by the inability to give precise and simple answer. Questions seem more for the asking and for the question [sic] they provokethan to substantiate any answers. So why, I wonder, would any answer be able to be correct. No—

  61. honey says:

    please send me curent affairs and simple general questions

  62. I would say: C is semantically old-fashioned, and whether answer A or B is correct depends on the context. ;-)
    M.

  63. Lan Yingjie says:

    I think it’s kinda obvious it’s B, cos’ B is for the Headline Tag. The title would be rendered in the headline form. However, I think it could have been phrased better. The title could refer to the title bar, using the tag. Though I would like to know what it was meant for.

  64. Rooney G says:

    I think that actually theres no difference how you html the title, the only important thing is how will it lay out. But search engine bots think other way, so we are forced to use ‘s and ‘s.

  65. Ok, I know it’s late for my post, but I just wanted to thank you all for the level of intelligence of your posts.
    I’m specially thankful for the discussion about using for the site title or for the document main heading.
    topics like these are extremely helpful for newbies CSS enthusiasts like me.
    Oh! and of course, I’ll go for option B.
    Happy 2005!

  66. Ottawa says:

    The important question I have, is what you use to mark up the site title? And I don’t mean the one that shows in the browser title bar. I mean the one that shows up on the page.
    Site title is usually shows up on every page. Using h1 for it on every page is kind of silly, but that is what I am doing now. Using any other non-h[1..6] tag, results in the site title being unnoticable on unstyled page.
    What is the proper, sematically correct way of displaying the site title on every page?

  67. Jan Krejci says:

    Well, I would vote for the B option.

  68. qwerty says:

    B, for sure