SimpleQuiz › Titles › Conclusion (sort of)

Where do I begin? This one has no obvious answer, and didn’t really intend to. In fact, very few of these questions really intend to have a definitive answer. And the following is my attempt to absorb the illuminating comments (and they are always illuminating) and make some sense of them.

Let’s get right to it. Book titles. Right. The title of a book. Think about seeing a book title in print — in a magazine or another book. A book title is normally set in italics. It’s a visual clue. It’s strictly presentational. Now think about a book title on a web page. We still want that visual clue — italics, but we also want all browsers and devices to know that this is a book title as well.

Moby Dick. I just used i. Is that any good? Well, using i is strictly presentational, it’ll give us the italics we want, which is good. But:

The only real difference is that i‘s nomenclature disregards all but visual browsers. (full comment)

When using i, visual browsers will render the book title in italics, but others may not.

Looks like B is out.

But non-visual browsers will recognize em you say? Great! But, do you really want the the title of a book to be emphasized (read faster and/or louder)? Probably not, so A is out — although I’m plenty guilty of using it.

So what about cite? Many dispute the relationship of cite in regards to a book title — if you’re simply stating the title of a book, are you really citing it? I suppose I could go either way on that one. One could argue that you are, in fact, citing the book title even when stating it without following quotations. cite also has the benefit of being rendered in italics in most (?) browsers — by default and without additional CSS rules. How many I could not tell you definitively, and that would be an interesting tidbit of information.

A fourth option would be to create a custom class and attach it to the span tag such as <span class="title">This is a Book Title</span>. But this to me is the same as using i — strictly presentational and if you wanted to be hilariously ridiculous you might point out that it would cost you a few more bytes for the span tag and associated CSS rule. Silly, but…

So the moral of this quiz question is: use one of the four methods and move on. Each of them has their respective advantages and drawbacks. Take those into account in the real world, make a choice and feel good in knowing that you may have some extra information on why you made it.


  1. Keith says:

    I love your moral Dan and can’t agree more. It’s good, and actually pretty fun, (nerd alert) to think about this stuff though, can’t wait for the next one.

  2. Tobias says:

    Very good Conclusion.
    This was difficult to summarize.

  3. I may have rambled a bunch in the last one, but I’m seriously a web design/development/semantics/standards newbie. That being said, I don’t understand why <span class="title"> is no better than <i>. I’ve seen a lot of people showing distaste with spans lately, and I can’t really figure out what they think acceptable use of them is.
    I mean, if <div> exists so we can create arbitrary divisions and assign our own semantics to them, why shouldn’t we use <span> to create arbitrary phrases and assign our own semantics to them? Why must all uses of <span> be relegated to the "Oh, that’s just <i> in disguise" department?

  4. Great summary Dan. Thanks. I learned a lot from reading the discussion.
    There’s still yet another option which sort of combines B and D<i class="title">Moby Dick</i> — which seems to me like a leaner, meaner version of option B.

  5. argh… this should have been “…a leaner, meaner version of option D.”

  6. Conan says:

    What’s that; “meaner” in its disregard for non-visual browsers? :p

  7. Egor Kloos says:

    This is turning out to be a pretty good quiz. Often I make a decision on what I think is and now I can make my decision and know what other think of it. The pro’s and con’s. In the end it is the goals for the site that count. And often clients only account for a visual product and don’t see accessibility as requirement in their communications. It might cost money so everyone would rather not mention it when budgets are tight. Remember, most countries don’t have accessibility laws as in regard to websites.
    A problem I have is that I’m not really aware of how a screenreader user reads / scans a page. They don’t scan a page like one would for a visual medium. So how important is it to highlight the booktitle? Should we “quote” it or use a tag as done here? Anyway without a real understanding of how a screenreader is used my choices will always be merely my best guess. All the projects I’ve worked on have been primarily visual products. HTML is primarily a visual markup language. And screenreaders are made to gain access to this primarily visual medium. I can try to make my pages more accessible but I have the feeling that that just isn’t enough.

  8. joel says:

    My question: what is the preferred behavior of a screen reader when encountering a book title? Should it preface the title by saying something like “this is a book title”?
    I wonder if the best option is to use the aforementioned <i class="title">Book Title</i> option, provide verbal context for screen readers (In his book <i class="title">Moby Dick</i>, Melville...), make sure to provide headings and captions for lists and tables that contain book titles, and hope that one day aural CSS will be to the point that we can create an aural rule for all i.title that would accurately reflect how a book’s title should be spoken (if there is, indeed, any change necessary).

  9. Bobo says:

    I’m not sure I understand what you get by using the semantically correct cite tag. If it renders in italics, that’s great, but what software is using the cite tag to say this is a book title, and what does it do when it finds a book title?

  10. Gabe says:

    I think the real question here is how much semantic information is even possible to communicate. Lanny asks why we can’t use a span+class to impart more semantical information. I think the simple reason is that there is no way to define those semantics meaningfully. Essentially spans are hooks for visual presentation. We can ascribe semantics to them (and should) for our own internal sense of order as coders/designers, but that meaning can not really be extended to the audience through anything more than what CSS gives us, and that is a presentational language.
    Let’s not forget, if we want to precisely define semantics, that’s what XML (or SGML) is for. We write up a DTD and perhaps some documentation and we have perfect semantics. HTML on the other hand is a language for a specific purpose: to define the common elements of multimedia documents. What is lacks in specificity it makes up in convenience for the lion’s share of information publishing needs.
    In light of that I see no problem with using the <i> tag to satisfy the visual convention. On the other hand, if I posted a lot of book titles and I wanted to make use of that information for my own purposes like making my site searchable for books then maybe I would go with the span+class solution. The point is, I wouldn’t do that for some higher principle other than my own needs.

  11. zavach' says:

    Dan said :
    But non-visual browsers will recognize em you say? Great! But, do you really want the the title of a book to be emphasized (read faster and/or louder)? Probably not, so A is out — although I’m plenty guilty of using it.
    No bloquote permited :-(
    IMHO semantic is not about marketing, so the “selling” objetive would not be in cnsideration. Sorry, I still think that the A answer is the more correct. The way you say “do you really want” is just like telling children that they were found in the garden, when they came to life, instead of telling ‘em that is about sex n’ love.
    Sorry for my franchise :-) That’s only the way i think ;-)

  12. Heh! Interestingly enough, the W3C HTML page uses <em> to mark up the foreign term "lingua franca." Tsk tsk tsk, W3C. ;)

  13. Justin says:

    Do you think, perhaps, we (as a community, that is) could be accused of sometimes being too pendantic? After all, you say that when we reference a book, we simply want that book’s name in italic. And that’s true!
    If someone with a screen reader, or a plain text browser, comes along.. do they NEED to have that nugget of content emphasized to that around it? In many cases, we want that to happen, with links, headings, and so on.. but with a book title? No. It could be read as just regular text to people with screen readers, it doesn’t need to change. The only reason we want to change it is from a TRADITIONAL point of view in that referenced book titles are always italicized.
    So, perhaps, I am being warmed over to the EM, or even I, point of view ;-)

  14. Dave S. says:

    Do you think, perhaps, we (as a community, that is) could be accused of sometimes being too pendantic?
    Anyone who hasn’t thought this at one point or another over the course of the SimpleQuizzes ought to get his or ger head checked.
    Not to disparage Dan’s great effort in the slightest, but the amount of analysis that goes into how we define data is mind-numbing.
    - Spoken as one who has dedicated a few thousand words to the topic recently, of course.

  15. Jules says:

    When I consider if I want to make something bold or italic for a visual user, I imagine what I would do if I were reading the text out loud.
    If I were talking about my book, I might emphasise its name so that the listeners would hear it more clearly and remember it. In that case, I would use em.
    I try to remember that speech readers read out loud and so I try to read out loud the page and listen to the inflections I give to various parts of text.

  16. Rene Saarsoo says:

    When I first saw the cite element, I thought, “Why should I ever use it?” Because in Estonia, where I live, we use quotes to distinguish book titles, and under no circumstances would I want my citations to appear in italics!
    So, first of all, on the majority of cases it doesn’t even accour to me, that I should mark up the titles in some way—there’s simply no need for that—the puncuation does all the job.
    Even if I try to write really‐really semantic HTML, and mark up all the book titles I reference with cite, and style them with cite {font-style:normal}, I’m simply running into trouble, because when stylesheets are off, titles fould appear in italics and this could be quite confusing for a typical Estonian reader.