SimpleQuiz › Part VIII › Titles

With this question (based on a suggestion by Shaun Inman), I’m hoping the discussion touches on a few different things that happen to be going on.

I’ll leave it at that for now, and let you all weigh in.

Q: When marking up a book title or publication, which of the following is the best choice?

  1. <p>My upcoming book, <em>SimpleQuiz: Get Down With Markup</em>, will be a bestseller.</p>
  2. <p>My upcoming book, <i>SimpleQuiz: Get Down With Markup</i>, will be a bestseller.</p>
  3. <p>My upcoming book, <cite>SimpleQuiz: Get Down With Markup</cite>, will be a bestseller.</p>


  1. rick says:

    I’d say C is the most semantically correct. says a cite is something that “Contains a citation or a reference to other sources.” We are referencing the book title.
    Plus, you can always make cites italic with CSS.

  2. Adam says:

    I’ve always taken the w3c’s definition of <cite> to mean, and be intended for, academic uses such as Bibliographies and the like. Your, citing your sources. With this instance, you are not “citing” the bestselling book, you are simply italicizing it because that’s what we were all taught to do with book titles in school. So, B is correct in your instance, and C would be correct with something like:
    “Repeated use of <div>‘s makes the chicks dig you” (<cite>SimpleQuiz: Get Down With Markup</cite>, page 204)

  3. David says:

    I think that you use the cite tag when you’re referring to the work, and you italicize when you’re just referring to the title itself.
    In that case, C is correct.
    If you had said, “The name of my book is SimpleQuiz: Get Down With Markup,” you’d just italicize because you’re just talking about the name itself versus talking about the book.

  4. I go with C. Neither A nor B is really semantic in the sense of describing the contents of the tag. The <i> tag just makes something render in an italic or oblique font. It says nothing about WHAT is being made italic. Same goes for the <em> tag. It just indicates that the author wishes to emphasize the contents of the tag; it doesn’t say what it is.
    C, on the other hand, conforms to the fairly vague W3C description of <cite>: “Contains a citation or a reference to other sources.” It’s probably not a citation, but it does refer to another source. It refers only by its title, but it IS a reference to another source.
    I think <cite> is the most accurate tag (semantically) that we have at our disposal in (X)HTML in this situation.

  5. Jeff Croft says:

    I go with “C” for purely practical purposes. “B” is no good to me. Use of the i tag seems silly to me in this day and age, and I’m honestly not even sure why it’s a part of XHTML. Using it completley flies aganist the ideal of seperating sytle from markup. I don’t htink there’s anything wrong with “A,” per se, but what if you have other em’s in your content, and you’d perfer to style them differently than you do book titles? For example, maybe I want book titles itallicized, but I want other empathized text to be bold and red. In this case, “C” works well, because using the “cite” tag seperates it from other em text.
    Just my $0.02.

  6. Dave S. says:

    Here we go.
    So, the problem in this case being that the W3 hasn’t properly addressed 500 years of typographic evolution, we have no clear element for titles.
    Should we? Probably not. No one wants a million tags to represent a million different semantic possibilities. So what to do, lacking one of those?
    <em> is out. We’re not emphasizing the title to make it stand out. The goal of italicizing, typographically speaking, is to provide a visual cue that this piece of information is of class ‘n’.
    <cite> is out. You aren’t citing the title, since there’s no corresponding quote.
    <i> is out. <i> is bad, avoid it because it’s purely presentational and so forth.
    So that leaves us with the need to create a ‘title’ pseudo-element. <span class="title"> perhaps? <em class="title"> might make the purists grumble a little less, but fact is neither are considered ‘good’.
    Why is this so difficult? Because titles blur the lines between presentation and structure. You have a semantic item with no corresponding tag, which traditionally has been indicated exclusively through presentation. Huh. Tough nut to crack.
    So getting right to the point: titles are too hazy to fit within the narrow scope of semantics that XHTML offers. Different people will have different approaches based on their opinion of what a title is. There is no right answer to this question, because an ideal solution just doesn’t exist.

  7. Keith says:

    This is something that I’ve thought about before and not been able to get my mind around. I’ve had to do this quite a bit and I’ve always used <em> but really, that’s no good. The only reason why I use that is to keep away from the <i> tag and give it an appearance of being italic. Semantically I guess <i> would be better in that case, since the only reason I use <em> is for presentation, and <em> actually conveys a somewhat incorrect semantic meaning in this case.
    I’ve thought about using <cite> but dismissed it because it doesn’t seem accurate. I don’t think it <cite> in this case is really semantically accurate at all, but I could be wrong. Then again neither are the other options you present, really.
    What about using a <span> tag, since really the only reason you would use a tag in this case is for presentation? There is no semantically correct tag for this case, so an agnostic tag like <span> might be best.
    Just an idea. Barring that I guess B would seem to be the best answer to me, although I use A whenever I do this.

  8. Matt says:

    Gotta disagree with the majority here. I have to choose B here.
    One italicizes book titles when you have the typographic power to do so (underline when you don’t).
    That’s the standard convention. No sense in arguing about whether you like it, or if it makes sense, and there’s certainly no call to complain that ” doesnt carry semantic meaning” — none of the three choices given allow us to tag this thing as a book title. Italics for a book title is a convention and is the closest thing to being correct.
    A is out. You don’t want to emphasize the book title – you don’t really know how that’s going to render, and in this case you really *do* want to make sure this thing comes out as italics.
    C is out: The tag is just the wrong semantic decoration for this application. A book title is not a citation.
    The best case would be a where booktitle is designed explicitly to be italic.

  9. alex says:

    I’m not sure there is a proper semantic tag to use for the title of a book. More to the point, why is it important to tag the title of the book as a different element in this case?
    I think I’d do something more like this:

    My upcoming book, SimpleQuiz: Get Down With Markup, will be a bestseller.

    Now we have a meaningful element in the sentance. We can use a class to designate the way we display book titles if we want to.

  10. alex says:

    wondered if HTML would be escaped – missed the light grey colored info AND the preview button at first – whoops! Feel free to clean this up Dan. :)
    Here is the code again (escaped this time):
    <p>My upcoming book, <a href="; class="book_title">SimpleQuiz: Get Down With Markup</a>, will be a bestseller.</p>

  11. Anne says:

    Some thoughts about i and b (why isn’t samp allowed?).
    I think answer A is the best, since you are excited about your book. You want to give it emphasis, ’cause you want people to remember that people, that they carefully read those words and don’t forget them. They ‘jump’ out of the rest of the text.

  12. TOOLman says:

    Hmm … English isn’t my first language, and I think I’m having trouble picking up the nuances here.
    I thought <cite> could be used for anything that you were referring to, e.g. titles of books and movies, not only as a means for citing (sic!) the source of a quote. (There’s a cite attribute for the <q> and <blockquote> elements for that, if my memory serves me right.)
    I also seem to remember that the W3C spec mentioned that <cite> was supposed to be used for things like book titles, and that they even used an example to that effect.
    In this case, I would have picked alternative C. Why is that semantically wrong?

  13. Ben says:

    TOOLman remembers it well. The specification clearly means we use cite for references such as book titles (look at the second example), while for actual citations, or quotations, we use q or blockquote.
    So the answer must be C.
    See also: (Dutch)

  14. Robbert Broersma says:

    Dave S. said: “<cite> is out. You aren’t citing the title, since there’s no corresponding quote.”
    I don’t think a quote is necessary. You probably know this example from the HTML 4.01 specification:
    As <CITE>Harry S. Truman</CITE> said,
    <Q lang="en-us">The buck stops here.<Q>

    But do you know this one?
    More information can be found in <cite>[ISO-0000]</cite>.
    No quotation! So it may be used for for (all) other references too.

  15. Andrew says:

    Personally I’ve always used D – ‘title of something’ :)
    Mainly as I’d never thought of actually using CITE. I’m convinced by the W3C example and will try to use CITE from now on.

  16. Tobias says:

    “[i]s out. [i]s bad, avoid it because it

  17. C…and I was going to quote the second CITE example from the HTML4.01 spec, but Robbert Broersma beat me to it.
    tobias: yes, and typographically the convention has been to have titles slightly bigger than the normal paragraphs, and possibly bold…but that doesn’t mean that we should ditch proper heading tags in favour of some CSS based presentational rules or – horror – font size=+3 or something. yes, to you as a reader they might still look like titles…but then you’ve missed the whole point of the semantic discussion, methinks… (no offence)

  18. I’ve wondered long about how/when to use the <cite> tag.
    * Should it only be used for citing biblical sources? (the W3C spec doesn’t seem to say that)
    * Should we use it for all “proper nouns” (Names of people, places, books)?
    * Should we wrap it around the <a href=""> tag when we’re linking to a person’s home page?

  19. Ben says:

    As Dave S says, XHTML doesn’t offer a definitive tag that is semantically appropriate in this circumstance.
    <em> simply “indicates emphasis” while, ideally, we want to attribute structural meaning to the in-line text, identifying it as the title of a written work. There’s also a presentational implication: if you specify <em> to be bold in your stylesheet, you’d be out-of-step with most English “style guides” which recommend titles be italicized.
    <i> doesn’t give the text semantic significance either. Nor is it in the spirit of separating presentation from content.
    <cite> is not appropriate either. This element is defined as “…a citation or a reference to other sources“. While Robbert’s W3C examples that TOOLman talks of are exactly that, the markup in question here is not. Dan is talking about his book, but he’s not referring to it as a source, ie. he’s not “citing” it. So this option is inappropriate as well.
    In the absence an appropriate element, I reckon the only semantically correct option is to use the <span> tag with an appropriate class attribute, eg. <span class="title">. Being pernickety, Dave S incorrectly called this a “pseudo element”. These are actually something else altogether.
    While this is what the <span> element is there for, any semantic significance of the class “book title” is limited only to the document in question.
    So, to answer Dan’s question: neither A, B, C or even “D” can be considered semantically correct.
    Someone call the W3C!

  20. Also: How should we markup the classic “cite-link-quote” format?
    Option 1:
    <p>Dan Cederholm: <a href="[url]">SimpleQuiz > Part VIII > Titles</a>: <q>"When marking up a book title or publication, which of the following is the best choice?"</q></p>
    Option 2:
    <p><cite>Dan Cederholm</cite>: <a href="[url]">SimpleQuiz > Part VIII > Titles</a>: <q>"When marking up a book title or publication, which of the following is the best choice?"</q></p>
    Option 3:
    <p><cite>Dan Cederholm</cite>: <a href="[url]"><cite>SimpleQuiz > Part VIII > Titles</cite></a>: <q>"When marking up a book title or publication, which of the following is the best choice?"</q></p>
    Option 4: ???
    P.S. Yes I know the quotation marks are somewhat redunant inside the <q> tags, but I’m marking up for backwards compatibility (readability) with older, simpler browsers. :-)

  21. jgraham says:

    As has been said, the spec seems to be suggest that C is a perfectly legitimate use of cite. However, there are a variety of similar cases where cite would not be appropriate, but publishing convention still mandates the use of italic text, for example names of ships or small sections of foreign language text (arguably, the latter might be indicated by some use of lang attributes).
    In these cases the use of em is not appropriate markup, unless you really mean that the text is emphasised. In fact, I would suggest that using em just to get italic text is worse than using the much maligned i element, since it pollutes the meaning of emphasis – essentially emphasis becomes a surrogate i, with no real semantics. One good way to tell if a text really is empahsised is to imagine that a user has em { color:red; font-weight:bold; font-style:normal; }, in their user css file. If the text can still be interpreted in the correct way, you are probably using em in the correct way. If, on the other hand, lots of ship names, bits of latin, or book titles suddenly become red, it’s probably wrong. Alternativly, imagine an aural stylesheet is set to increase the volume of empahsised text by 50% and reduce the reading speed. Does that still make sense for the text maked as em?
    The best solution in these cases, assuming there is no appropriate semantic element, is probably some use of span, either subclassing it for every type of text you wish to be italic, or alternatively creating some ‘non-semantic-italic’ class. If this produces too much typing, then i is better tham em, if only because it implies nothing about the reason for marking the text as italic. So, to relate this back to the question, although C is probably correct B >> A unless you really do mean to emphasise the text.

  22. Ben says:

    Oops. Corrections to my earlier comment: the example should have been <span class="booktitle">, and the 3rd last paragraph should have read: “any semantic significance of the class “booktitle” is limited only to the document in question”.
    That’ll teach me not to use preview.

  23. This is useful for me as a non-native English speaker: Merriam-Webster on the word “cite”:
    1 : to call upon officially or authoritatively to appear (as before a court)
    2 : to quote by way of example, authority, or proof
    3 a : to refer to; especially : to mention formally in commendation or praise b : to name in a citation
    4 : to bring forward or call to another’s attention especially as an example, proof, or precedent
    And Merriam-Webster on the word “citation”:
    “2 a : an act of quoting; especially : the citing of a previously settled case at law b : EXCERPT, QUOTE”
    It seems to me that the literal meaning of the noun “citation” is not the name/title of a source, but actually the direct quote or excerpt from the source (usually enclosed in quotation marks).
    Thus, <q> and <blockquote> are used for marking up “citations” (or “cited” passages), which seems to leave the semantic meaning of <cite> somewhat undefined… ?

  24. Egor Kloos says:

    To be quite honest I think that one could apply any of the given answers and not have the Spanish Inquisition descend on you . However given the fact I’m not aware of any context in which these sentences sit I’ll opt for answer C.
    In some cases I’d opt for B, unlike Dave S, I do believe that such visual presentational markup has it’s place. HTML markup contains other tags that are visually presentational in nature. Take the TABLE tag for instance, although it can give us some meaning about it’s content it’s main function is to give us a specific visual presentation. To separate content and presentation is strictly speaking not always posible, but it is a worthwhile goal to aim for.
    Using EM would suggest a specific intention and since I’m not aware of any intention I can’t really opt for this solution. The use of SPAN has also been mentioned. But because this tag is agnostic it then has no added value other than allowing you to style the title, depending on your needs this can actually be useful. You can also style the CITE tag freely because it is not presentational and you can also retain some semantic meaning.

  25. Ben says:

    Mar: following from your example, the semantic meaning of <cite> is the place where that quotation is from, ie. the source. At least that’s my interpretation of the W3C spec. <q> and <blockquote> then correspond with the verb “to cite”, while the <cite> corresponds with the noun, the source you’re referring to.
    Of course, as I said earlier, in Dan’s example he’s not quoting or “citing” the book, he’s merely passing comment it. Hence <cite> doesn’t seem appropriate.

  26. Ben, I’m not sure I follow, what noun are you refering to? “Cite” does not exist as a noun, and the only noun form of “to cite” is “citation” which means the same as “quotation” or “excerpt”.

  27. Egor Kloos says:

    Ben, you made me think twice. CITE does seem misplaced, it almost works. Then option (B) would be left over because (A) doesn’t feel right either. I can’t see any reason to highlight the title is such a way. If the book is also recorded or available in braille then the EM tag could be useful to (ab)use for the benefit of screenreader users. But I can’t apply such meaning because I’m not aware of it’s context. All I can do is asume, and that’s no good at all.

  28. Egor Kloos says:

    After reading the W3C specs the and rereading Broersma’s comment I may need to stick with my original comment. And now I’m really sticking to it… I should stand firm, like a man, even if I’m wrong. So there.

  29. David says:

    We haven’t mentioned another important distinction that type has for referring to works: short work versus long work. Song titles, chapter names, and short stories in type are surrounded by quotation marks, while album names and book titles are italicized/underlined.
    This brings out a very different problem, and points out a big difference in content versus form.
    Content-wise, the <cite> tag goes wherever a work is cited, no matter if it’s a short story or a novel, or even a person’s name. But form-wise, the cite tag would need to intuit which one we want to output the proper formatting. I’m sure that xhtml won’t do this.
    Givin this, I think we’d probably want to use something like:
    <cite class="short">Everything Sucks</cite> by <cite class="name">MxPx</cite> on their new album <cite class="long:>Before Everything and After</cite>
    All three seem to be valid uses of <cite>, but all three should be displayed differently. (And I’m not sure how to display name-class citations.)

  30. Two things:
    1. Don’t confuse the name of a tag (i.e., <cite>) with the English word that it looks like (i.e. “cite”). (X)HTML tags don’t always correspond precisely to their English equivalents, and many English equivalents have a number of possible meanings. That’s part of the problem here with <cite>. Following the w3c guidelines, <cite> is correct in this case. The second example in the spec clearly shows that. True, it’s not a citation in the way that we usually think of that word, but it’s an acceptable version translated to (X)HTML. Heck, if you want to get nitpicky about the literal meaning of the word in the tag, “cite” is a verb; “citation” is the noun. Don’t get hung up on the semantics of the word in the tag. ;) Look to the spec.
    2. Several people have commented here that <i> is the semantically proper way to go because it’s a typographical convention to italicize the title of a book. That’s selling the medium short. The semantically rich part of markup isn’t exposed to the viewer; it’s under the hood in the markup. That’s the structure of the site. The presentation of the site can take on nearly any form you want. It’s called CSS. In this case, you can use semantically rich markup (i.e., the structure under the hood) using <cite> (see point #1 above) and then style it with CSS as font-style: italic so that it appears to the reader as italic text. That way, you’ve achieved both goals using semantic (X)HTML markup for the structure of the item and CSS to determine the presentation of the content to the reader.

  31. “But form-wise, the cite tag would need to intuit which one we want to output the proper formatting. I’m sure that xhtml won’t do this.”
    in my view it’s not a case of xhtml doing or not doing it, as visual formatting is not what it’s used to. it’s true that the cite tag has a default rendering, but it is the CSS’ job to define how it’s displayed “form-wise”.

  32. brent says:

    I thought was deprecated in XHTML in lieu of ?

  33. brent says:

    That should have been “”.

  34. Anonymous says:

    i even

  35. Michael Z. says:

    I think a lot of people are interpreting “cite” much too restrictively. I don’t think it’s a big reach to decide on C.
    * book titles normally appear in italics.
    * the common <cite> tag — which refers, among other things, to book titles — renders text in italic.
    * therefore, use <cite> for book titles.
    I also use <cite> for titles of artworks, but merely wrap quotation marks around story titles. If you have an application that requires you indicate story titles in your markup, then David’s suggestion of <cite class=”short”> sounds like a good idea. I think that <cite class=”name”> wouldn’t be styled at all.
    There’s no single “right” way to use markup, and the spec isn’t scripture. Sometimes you might need to mark up a citation’s author’s name, but usually you don’t. Maybe doing it just suits your style.
    But then if you always do things consistently, interesting applications may emerge. Check out what Mark Pilgrim has done with the cite tags on his site.

  36. Fleeno says:

    If <cite> always renders in italics, I would use that.
    If some browsers don’t render <cite> in italics, I would just use <i>.
    I don’t think the <cite> tag itself does much for me semantically. I could put all sorts of information in it. The tag doesn’t care if I use it for a book title, a UPC code, or a web page title.
    I just want my book titles in italics. If I this were a list of sources, I would be doing things differently.

  37. Michael Z. says:

    In response to jgraham regarding ship names and foreign phrases:
    But, by italicizing them you are emphasizing them — using a slightly different visual appearance to draw attention to their different nature, and thus avoid confusion.
    I’m not sure about ships, but I use <em lang=”fr”> for foreign phrases. <dfn> would be a good candidate too, if you’re explaining what the phrase means.
    Typographically, the function of italics is usually to subtly emphasize words in running text while it’s read, without drawing attention to them on the page. If you wanted to give them a stronger emphasis, then you could render them as bold, but many designers consider this overkill. Alertbox uses bold text to help articles fit into corporate decision-makers’ attention spans, but it looks like a baby book to me.
    If a user’s style sheet renders <em> in bold red letters, more power to them, but I won’t worry that my design doesn’t speak to their soul.

  38. Michael Z. says:

    cite {
        font-style: italic;
        font-weight: normal;
    cite.upc {
        font-style: normal;
        font-weight: normal;
        font-family: monospace;

  39. Eli Simpson says:

    I like C. I use cite all the time for this type of reference. It’s what the W3C intended, according to the spec.

  40. C is the one which I prefer most of this choices. But I think, that the use of <q> is even better.

  41. jgraham says:

    “But, by italicizing them you are emphasizing them & using a slightly different visual appearance to draw attention to their different nature, and thus avoid confusion.”
    Well, yes, but down that road lies madness. Afterall, most visual formatting is trying to emphasise text in some way – headings usually have distinctive formatting so that they stand out relative to the surrounding text. There is no reason why links should not have the same style as the surrounding text, except to point out that they have special importance. These examples, however, are not marked up with em, or even something like <h1&gt<em>very important heading</em&gt</h1>. Moreover, the visual effect of italic text is always emphasis – so by your argument <em> and <i> are equivalent – which I don’t believe to be true. Practically, the difference is probably most obvious when you consider an aural rendering – if I were reading a document, I would expect to give truly empahsised text a characteristic voice that I would not use for something like a ship name.

  42. Ben says:

    Steven & Micheal Z: On reflection, I agree with your point about not fussing over the English significance of an element name (besides, Mar was right: I should have said “object”, rather than “noun”).
    I may be The Devil’s Advocate, but I still don’t feel Dan’s example is a citation.
    If, like Eli and others have said, the W3C intended the <cite> element to be used in a case like this, why specify it’s purpose as referencing “sources”? The example in the HTML 4.01 Spec:
    More information can be found in <CITE> [ISO-0000]</CITE>.
    Even this is referring to information contained within an ISO-0000 document. Isn’t that distinct from Dan’s example where he’s simply talking up his book rather than referencing it as a source? Consider the following:
    <p>My new widget, marketed under the name <cite>Simple Bits</cite>, will be a bestseller!</p>
    How is C different to the above? I wouldn’t use it in that circumstance, why here? Or am I just getting too pedantic in my old age? :-)

  43. kirkaracha says:

    I use CITE because it's a reasonable interpretation of the W3C spec, it's the most practical real-life option, and because I often type "cute" instead.

  44. Ryan Parman says:

    I am all-for valid XHTML, CSS, Table-free designs, etc. I embrace web standards and all that they encompass. However, it seems to me that many web designers into standards-compliant design (SCD) have begun to completely shun the use of <b> and <i> in favor of <strong> and <em> because they make “more semantic sense”.
    However, there have been a few times (not many, but a few) where <strong> and <em> weren’t the correct semantic meaning for what I was trying to accomplish. The text didn’t need to be “strongly” taken, nor did it need to be “emphasized”. One thing that many SCD people tend to forget is that there is such a thing as visual communication — communication that only has a visual purpose. It wouldn’t make semantic sense for a screen reader (for example) to pronounce or annunciate the text any differently.
    Regarding <span>, it also has it’s purposes. In the JavaScript section of my website, I display a lot of code samples. There are many times when I want to highlight a section of code to make it stand out from the rest of the code on the page, so I use <span class="highlight"> to make it stand out. “But that’s only visual,” you say. I’m just wondering, how many blind programmers do you know? “But it’s not semantic!” No, it’s not. But has the W3C implemented in HTML or XHTML implemented an alternative yet? No, they haven’t. Sometimes you just have to work with the straps you’ve been given.
    And if we’re going to bash people for not being semantic, then we should also bash people who use <img> instead of <object> (but that’s another XHTML 2 issue).
    As far as this question is concerned, I’d have to agree with rick, who said: “I

  45. “One thing that many SCD people tend to forget is that there is such a thing as visual communication — communication that only has a visual purpose. It wouldn’t make semantic sense for a screen reader (for example) to pronounce or annunciate the text any differently.
    Regarding , it also has it’s purposes. “
    well, there you go. for situations in which you’re doing something purely visual, spans are your friend. they’re neutral in that they don’t carry any specific semantic connotations and meaning, but they’re used to delimit certain inline content which can then be styled. bold and italic tags, however, are purely visual tags which obfuscate the actual content. and if you’re arguing that something being bold or italic is part of the content…then maybe you do need em or strong after all…
    a cyclic discussion this one, methinks ;)

  46. Michael Z. says:

    Jgraham, we’re starting to split hairs here. But you seem to be saying that <em> tags represent only a particular kind of emphasis — like when a word is spoken more slowly to add stress to it. And <i> should be used to give text other kinds of emphasis, e.g. when a word is spoken with a different accent.
    Here’s how I see it:
    Semantic elements (h1, a, dfn, cite, abbr, acronym, code, etc.) provide information about the nature or purpose of enclosed text, and are often styled (visually emphasized) to identify them, differentiate them from each other and provide emphasis in visual browsers.
    <em> is a more generic tag, which also visually differentiates and emphasizes, but doesn’t say why the text is being emphasized. It’s a semantic baby step up from <span>. I often use it when I know something should be italicized, but there isn’t a more specific semantic tag.
    Several of these kinds of emphasis are commonly styled as italics in print, and the particular meaning is divined by the reader from content or context. The W3C defined tags specific to some of them, but not others.
      <cite>War and Peace</cite>
      Picasso’s <cite>Guernica</cite>
      This is called the <dfn>Heisenberg Uncertainty Principle</dfn>
      <q class=”shortquote”>I like puppies</q>, he thought
      Stop. <em>Stop!</em>
      a certain <em lang=”fr”>je ne sais quoi</em>
      <em class=”ship”>H.M.S. Dreadnaught</em>
    There is a semantic reason that these are commonly italicized, and so I don’t think that marking them up with <i> or <span class=”italic”> is sufficient. Well, maybe the ship’s name.
    <em> and <i> are very nearly equivalent (ever try to convince a graphic designer that <em> is better?). The only real difference is that <i>’s nomenclature disregards all but visual browsers.

  47. Fleeno says:

    Michael Z: That’s fantastic, but what happens if the browser doesn’t render CSS, and it doesn’t think <cite> should be italic? Suddenly I look like I don’t know how to properly format a book title.

  48. Jeffnelson says:

    Just a side question about the <i> tag: in print I’ve often seen phrases in foreign languages set in italics and currently I markup such text as <i lang="LL"></i>. Is would this still be correct or would a <span> with a lang attribute and corresponding CSS be more appropriate?
    As for the title question, I tend to use <cite> when referring to the titles of works (ie: I loved So Andso in <cite>Summer Blockbuster II</cite>, which I saw whenever.) but not if I’m just, say, listing titles (like favorites or something).
    Would this be a case like <abbr>/<acronym> where it would be acceptable to only <cite> the first time a title is referred to?

  49. Re Michael Z. and others:
    Actually, <em> denotes a very semantic kind of emphasis. Take these two sentences:
    "Michael told you to walk the dog?"
    "Michael told you to walk the dog?"
    The meanings conveyed in those two sentences are vastly different. The emphasis is neither strictly visual nor strictly vocal, but purely semantic. This is the kind of "emphasis" that <em> was made for. It is very semantic, and to use it to italicize foreign phrases or ship names is worse than using <i>.
    Ship names or foreign phrases might be emphasized visually, but they’re not emphatic.
    As for the quiz… …I’ve always used <span class="title">, but I may start using <cite> now. Imagine that you want to compile a list of all movies you’ve ever referred to on a site. If you have them marked up consistently, you could just have a script parse the site for that markup. Now, for that sort of thing, doesn’t <cite> make an awful lot of sense?

  50. Michael Z. says:

    Feeno: do you know of any browsers that don’t know how to render <cite>? The Mac & Windows version 4+ browsers that I have at hand render it in italics. Lynx uses the typewriter convention of underlining.
    So far you’re looking okay if you use <cite> for citations.

  51. Michael Z. says:

    Lanny Heidbreder brings up a good question about the meaning of <em>. W3C just says “Indicates emphasis.” I’ve always assumed this means emphasizing the words in their context (visual or whatever), not necessarily as an emphatic statement.
    Lanny, how do you know that this is the kind of emphasis <em> was made for?
    I still think we’re splitting hairs, and possibly discussing points more specific than can be inferred from the specs. Perhaps exact usage at this level is a matter of personal style or convention. But I’d like to see what we can logically get out of the specs.

  52. michael z: maybe exact usage at this level depends on what kind of processing etc you expect to do on the content during its life cycle. if all we’re talking about is a page that will only be visible for a few months and then disappear forever, then i wouldn’t even bother with trying to clearly define what a cite is…but if you’re marking up a document that you expect to use, in whatever shape or form, for years to come (possibly programmatically processing it into some other language, markup, or other), then it probably makes sense to think carefully about how you use structural tags (and probably remain consistent in your usage). my GBP0.02 anyway…

  53. Michael Z,
    "I’ve always assumed this means emphasizing the words in their context (visual or whatever), not necessarily as an emphatic statement."
    "Emphasizing in context" is almost the very definition of "presentation." :) If we’re to interpret elements in HTML as semantically as possible, we have to interpret them in a way that applies to all media, unless the element is overtly native to a single medium. Emphasis is not overtly native to a single medium, so I think we must interpret <em> as being meaningful to all media. This leaves us, I believe, with my definition: emphatic phrases.
    As a matter of fact, regarding the quiz, I guess I think <i> is acceptable. Although in that case <cite> adds structural meaning, the italicization is independent of the structure. Take this one:
    "I took a trip on the HMS Pinafore."
    "HMS Pinafore" isn’t a structural part of the sentence, it’s just a proper noun you happen to be talking about. It has no structural significance, so why use a structural tag? Use <i>, let browsers italicize it, and let everyone else treat it like any other noun. The end. :)
    In fact… …maybe the whole problem is that we’re confusing "structure" with "meaning"?
    (PS — To all those who say we’re splitting hairs: That’s what semantics is. ;) )
    [Disclaimer: I used <em> for both the ship name and this disclaimer, since it's the only italicization I have access to. ;)]

  54. MikeyC says:

    For those who have voted for using a <span> tag instead of <i> because they find <i> distasteful but recognize that the example requires a specific presentation I would argue that it’s incorrect to use a <span> tag because it requires the presence of CSS.
    We’re never going to get 100% separation of presentaion from structure not even in XHTML 2.0. They’ve already put the style attribute back in and by the time it’s finalized I’m sure we’ll see the return of the img tag. Separation of style from structure makes sense about 99.9% of the time, but there is still that odd 0.1% when presentational mark-up actually makes more sense in a given situation.
    For example: <span class=”underline”> versus <u>
    If <u> stood for ‘urgency’ instead of ‘underline’ we’d have a completely different attitude towards it.

  55. Justin says:

    Totally agree with Mikey above. That said, the old standards said what they said ;-)
    I’d personally chose C or create my own style. CITE has always seems like one of those pointless extraneous features of HTML to me, that was added specifically for presentational purposes.
    Perhaps my dilemma is.. SHOULD every type of content have its own element/tag? I don’t think so. Otherwise we’d end up with <name>, <phonenumber>, <zipcode>, <age>, <ingredient>, and so on.
    I think broad groups should be covered, sure, as in sections, pages, lines, links, ‘emphasized’ text, and so on, but going down to individual things like citations? It doesn’t rub well with me.

  56. jgraham says:

    Lanny: thank you you’ve made the point I was trying to make but in a much clearer way.
    I should stress, however, that I do not believe that using <i> is anything like an ideal solution. Using <span class="foo"> is a much more appealing solution, since it’s not overtly visual and is also more friendly for later processing (e.g. picking out all the ships mentioned in an article mechanically would be almost trivial with the later solution, but almost impossible with the former). There is quite a lot of discussion of this over in a post at weblog about markup and style.
    Justin: “CITE has always seems like one of those pointless extraneous features of HTML to me, that was added specifically for presentational purposes”.
    Why is it any more persentational than any other tag? It allows the author or the reader to identify works that have been referenced in producing the current document, so that they may be consulted to check facts or for background reading. You could, far eaxmple, produce a CMS that automatically complied all citations into a bibliography to be inserted at the end of documents. Or someone browsing could pull out a list of all the citations* in the document.
    *On a different topic; that would be a great browser addon – an interface that allowed you to pick all the tags of a particular type out of the document and view their attributes and content so you could get e.g. a list of links from the document, a list of citations, a list of definitions, etc.

  57. laacz says:

    I guess, titles are ment to be quoted. So, putting them into single or double quotes should be enough. Otherwise we will end at something like this:
    I work on "Book on the future"..
    As the matter of fact, references should be marked up as hyperlinks. If we have no hyperlink to associate with this reference, just forget it. It is no reference if it has no target :)

  58. laacz says:

    Pardon, forgot &lt;’s:
    <person>I</person> <verb>work</verb> <pronoun type="demonstrative">on</pronoun> "<reference>Book on the future</reference>"

  59. zavach' says:

    IMHO, I’d rather say that “A” answer is the correct one because:
    * semantically&trademark ((c) Zavach’ LOL) “C” is incorrect : you’re not “citing” coz’ citing is talking about something else being in repport with the thing you’re talking about. and you’re in this case just talking about YOUR book :-) (would it be more nacissious ? ;-) )
    * answer “B” is form (and not content) modifying, it does’nt intend to make the title different semantically. Let say it’s just like modifying colors. We can change colors just for inciting people to buy or to make it nicer.
    * answer “A” is almost the semantically correct one, because it emphasise (excuse my english), let say in french “elle met en valeur” the title of the book (note that the french words in here are emphasied) again x-kuz’ for my poor english ;-)
    THat’s it

  60. pete says:

    I’d go with ‘C’
    Either that or “tag ‘em all, and let Google sort ‘em out!”

  61. Zavach' says:

    Hello again !
    I’ve recently read a book von Hopkins(it’s semantically more convenient to say von in german, that sounds nicer ;-) ) It talks about scientific advertising and guess what… the book was written in 1929 !! and it’s still more scientific (look ma’ i’m using “em” !) than the biz-i-know-everything-people of today ;-)
    Any way, in the book, Mister Hopkins said that’s more selling to put your merchandise titles between quotes (“”).(i’m not using “em” in (“”) ) and because of the fact that the only tag you suggest for emphazying is i’d use it instead of or the worst IMHO “cite” tag.
    As you can note it, semantic is just about what you want to say. it’s not really a FORMAL thing.
    Can someone else explain it more harder ? LOL

  62. zavach' says:

    Any way, in the book, Mister Hopkins said that’s more selling to put your merchandise titles between quotes (“”).(i’m not using “em” in (“”) ) and because of the fact that the only tag you suggest for emphazying “em” is i’d use it instead of “i” or the worst IMHO “cite” tag.
    Whay just not preview the comment before poting it ? damn ! i’m so idiot sometimes ;-) Excusez moi monsieur (like my ex-students used to say ;-) that’s a “cite” tag in use LOL)
    By the way, how your “code” tag looks in CSS ? the dummy question ever !

  63. zavach' says:

    Hi again ! Feel the mood to talk a lot today, sorry :-)
    Recently, i’ve seen the legendray mom’s post of little yellow different. Ernie used the ... tag to say that his lovely mom was talking in chinese.
    Would’nt it be magic if future versions of xhtml & co translate texts just by puting ‘em between the wished tags ?
    Okay, i shut up ! ;-)
    See you.

  64. Anonymous says:

    Hi again ! Feel the mood to talk a lot today, sorry :-)
    What’s going wrong !
    Recently, i’ve seen the legendray mom’s post of little yellow different. Ernie used the &ltchinese&gt ...&lt/chinese&gt tag to say that his lovely mom was talking in chinese.
    Would’nt it be magic if future versions of xhtml & co translate texts just by puting ‘em between the wished &ltlanguage&gt ...&lt/language&gt tags ?
    Okay, i shut up ! ;-)
    See you.

  65. gpl says:

    A book title is in italic. So B is the solution. Searching ways to semantically tag everything in XHTML would be tedious. XHTML is not meant for that, even if many things can be semantically tagged.
    The real question is: do we need semantic ways to tag a book title? Isn’t the context sufficient in that case? XHTML is meant to be rendered as a visual, aural or braille way (and others): a title is a context thing. XHTML is not meant as a dialect to be parsed by programs to exchange data; it’s for human.

  66. Actually, I’m not sure what I was thinking when I decided that <i> would be acceptable. (This is what happens when you think about this stuff too hard/too long.)
    Because yeah, I MIGHT decide to go against the grain of typographical conventions on my site, and say I want all my ship names and movie titles to be a different color, or bold or something. Even if it’s a long-standing typographical convention, it’s still presentation and is subject to the whims of the designer.
    Also, what if a title appears in already-italicized text? We’d then want to de-italicize it, which <i> certainly doesn’t do. It’d require CSS, and if you’re using CSS to deitalicize, I suppose you might as well use it along with <span> or <cite> to italicize in the first place.
    (Incidentally, they seriously should’ve made some kind of !invert modifier for styles. So if you say font-style: italic ! invert ; , then that style would be deitalicized if it inherited italics.)

  67. Mike W S says:

    I’m enjoying these quizzes. Don’t some of you have work to do?
    Crikey! If I’m to continue authoring web pages I’d better do a course on typography conventions or, on second thoughts, as a Mac user I’ll keep to being unconventional.
    As far as this question goes, if the only reason for singling out the book title is to fit a typing convention (which surely is a visual thing) just use the italic element or a span if you’re really opposed to <i>’s.
    I’m pleased to see the subject of changes in natural language crop up. Please do a quiz on that because I’m English but living abroad and my web site is written in english but contains lots of foreign words and I would be interested to know how others cope. Should I put them all in italics?
    Interesting how comments on the subject of typography contain so many typos and spelling errors.(Non-native english speakers excused) :)#

  68. Justin says:

    laacz.. I think you’ve hit what I was trying to say right on the head with your example. There’s only so far we SHOULD go. Nailing down every single noun, verb, and nuance with tags would be hilarious, but inpractical. So, I feel, it also goes with CITE.

  69. Shaun Inman says:

    This is in response to jgraham regarding a browser plug-in that can extract links, lists, definitions, etc. I whipped up a JavaScript favelet that addresses your first request: Extract Links Just drag that to your bookmark bar and press it to open a new window with a list all the links from the page you are currently viewing. I’m sure it can be expanded on to extract other tags as well. Cheers all!
    (Sorry for skirting my question Dan, commenting would have felt like laughing at my own joke ;D)

  70. Simon Jessey says:

    I would go for <cite class="booktitle">The Title Of The Book</cite>, although you won’t find it happening very often on my own web site (I usually use <em>).
    Basically, I would treat the <cite> element as a generic element that covers these situations. A similar example would be the <abbr> element, which will be used, in the future, to markup all abbreviations, whether they be acronyms, recursive acronyms, initialisms, or just plain old abbreviations.
    I often wonder if these lengthy discussions about XHTML semantics are really necessary. XHTML is a markup language for describing a document, not for describing data. Semantic value is nice when you can have it, but it’s hardly the end of the world if you can’t. If the Semantic Web takes off, it will not be built on XHTML, but on RDF (or something similar).
    I’m not a fan of the italic and bold elements. I prefer the emphasis and strong emphasis equivalents for their accessibilty advantages. Although I’ve seen many arguments that suggest otherwise, I don’t regard <i> and <b> to have semantic value, so I don’t use them at all.

  71. Chris says:

    With reference to Jeff Nelson’s use of <i lang=”LL”>, surely this is an example of where <span> is required. There are no semantics (or meaning) to be highlighted, nor is there necessarily any visual emphasis required. However an aural user agent needs to know that the language has changed so the appropriate pronunciation can be used, so <span language=”LL”> seems entirely correct here. Since it is a convention in some languages to italicize foreign words and phrases, it could be styled using a CSS attribute selector.
    I would suggest that <span>s, could be used for marking up other text which is conventionally highlighted in some way, such as names of ships, artwork, etc, with a suitable classification.
    Perhaps there ought to be a standard way of documenting such classification schemes in meta data – does Dublin Core provide the means of doing this?.

  72. AcjBizar says:

    I would go for option c. I think it’s the most semantically correct.
    Option a is simply wrong.
    Like the W3C states, and I quote: The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.
    In reference to the elements tt, i, b, big, small, strike, s, and u.
    ‘Nuff said.

  73. xian says:

    I’ve always used the (c) example (cite) even with a vague sense that it was not semantically ideal. Frankly, I’m waiting for a web-authoring interface that says, “I see you are trying to apply italics. Is this because you want emphasis, the term is from a foreign language, the term is the title of a work, or another reason? If it’s another reason, please teach me.” Then my imaginary HTML/CSS wizard would whip up a good class rule to apply.

  74. Millennium says:

    It sounds to me as though CITE is one of those wonderful mis-specified or under-specified tags. W3C’s own examples would seem to indicate that Option C is correct -and I believe it is- but their statement is worded in such a way that it doesn’t sound like it should be correct. Bad wording on their part, probably.
    Structurally, a book title could be considered a kind of citation. Recall that some titles are italicized (or underlined when italics are not possible), while others are put into quotes, and so forth. With the different ways of expressing these things, it’s fairly clear that it’s a structural matter, not a visual one. Thus, I can’t be correct any more than U would be. Likewise, EM can’t be correct, because you’re not emphasizing the text. C would seem to be correct, but the tag doesn’t have a very good name for this sort of thing.
    Frankly, Q and BLOCKQUOTE should have some sort of attribute -or perhaps an element contained within, as with the fieldset/legend pair- for defining the source. Perhaps a SOURCE tag with an href attribute so that name and address can be specified. With that inconsistency dealt with, then CITE chould become The One True Way for marking up titles, with all the ambiguity at last resolved.

  75. Phil Wilson says:

    Q and BLOCKQUOTE have the ‘cite’ attribute where a URL can be entered (as, in fact, do the INS and DEL elements).
    “The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.”

  76. Swannie says:

    First of all, as I understand it XHTML is not semantic, it is structured syntax. The tag that you choose to “mark” data with is really up to you. To my semantic web agent it’s just data and has no meaning.

    In this case I think that is the most syntactically clear, as it implies to the human reader good semantics. To get proper semantics you would need to annotate the cite with some RDF/XML to a widely recognised ontology that recognises citation of book titles.

    BurningBird on Cite and RDF explains it in a pretty good way.

  77. Jean-Francois says:

    The Web being what it is (interactive, remember), I would certainly go with a link to the book site or something along that line. That’s what makes it such an efficient time black hole.

  78. Remo says:

    when you see the www as a “collection of information”, then “SimpleQuiz: Get Down With Markup” should lead you to more information about that book. so i’d go for an anchor:

    My upcoming book, SimpleQuiz: Get Down With Markup, will be a bestseller.