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