-1

Which is the correct markup element to use around "New York Times" in the following text?

The new book from <i>New York Times</i> bestselling author J.K. Rowling

The new book from <em>New York Times</em> bestselling author J.K. Rowling

The new book from <b>New York Times</b> bestselling author J.K. Rowling

The new book from <strong>New York Times</strong> bestselling author J.K. Rowling

The new book from <cite>New York Times</cite> bestselling author J.K. Rowling

The text "New York Times" should be italicized. The text is being entered via WYSIWYG by non-technical users, so classes aren't an option. But I can control what element surrounds the text when the italics WYSIWYG button is pressed.

cantera
  • 24,479
  • 25
  • 95
  • 138
  • 2
    HTML is a semantic markup language. Your choice of markup will depend on the semantics. "should be italicized" is a description of how you present the semantics to a visual end user. There are several different semantic reasons for using that presentation. You have to first decide **why** it should be italicized. – Quentin Aug 01 '14 at 18:33
  • Thanks for responding. It should be italicized because it's the title of a newspaper. I'd like to understand the correct element to use given this semantic reason. – cantera Aug 01 '14 at 18:41
  • possible duplicate of [What's the difference between and , and ?](http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em) – PowerUser Aug 01 '14 at 19:52

3 Answers3

3

The difference is that when you read the page with a screen reader, if you used <i> and/or <b> it will not recognize it and will not give the desired "special meaning" to the text. These tags are just for visual appearance and thus should not be used. If you want to change the look of your text use CSS instead. But if you decide to send the "special meaning effect" to visitors that use screen readers you'd better go with <em> and <strong>. Even the tags' very names tell you what they are used for. <em> stands for Emphasis while <strong> means that this text is more-important than other texts on the page. <i> stands for Italic and <b> stands for Bold. these were popular back at the times of HTML 4.01 and now when HTML5 is out we should use <em> and <strong>, even W3C says so. And since browsers render them the same way I'd go with <em> and <strong>. I suggest you do the same. And if browsers stop rendering these elements alike? Simple, you'd notice the difference and use CSS instead of <i> and/or <b>.

Anyways I think this is much of an opinion-based question.

EDIT:

So here's a list of advantages of the <em> and <strong> upon <i> and <b> (I don't think you'll find any disatvantages, though):

The OP was saying that it is about a newspaper title, wasn't it? So you'll need to add emotion to it. And here come and . They get rendered as <i> and <b>, but have one plus: screen readers. Your site may be read by such devices and so they can give the feeling of an "emotion" and actually give your title semantic meaning. This way you will be supporting not just normal browsers, but screen readers also. So why satisfy with the less? I'd also advice you to see the W3C semantic data extractor (http://www.w3.org/2003/12/semantic-extractor.html).

EDIT 2:

So now that the discussion about , , and is over let's take a look at the tag. As W3C says it should be used for a title of a work, and newspaper articles are written by humans, thus they are somebody's work and should be used. Anyway, if you want to maintain the emotional effect for the screen readers (for blind people) you could do something like this:

<!-- ...Other content... --->
<strong><em><cite>Your Article's Title</cite></em></strong>
<!-- ...More content... --->

Source(s): Me.

PowerUser
  • 812
  • 1
  • 11
  • 32
  • Great answer, thank you. I agree that it seems to come down to opinion, but ultimately my objective in asking the question was to take all opinion out of it. I've read the spec, articles, etc., and there doesn't seem to be a correct answer. That seems like a failure in the spec considering this is such a common use-case. – cantera Aug 01 '14 at 19:11
  • @cantera: As I stated above, the `` and `` were HTML 4.01 failures indeed. But now we have `` and ``. Most new and modern websites use these tags. I edited my answer. – PowerUser Aug 01 '14 at 19:45
0

I think the answer to this may vary between users, but I have always used <em> for italicized text.

Matt L
  • 127
  • 9
  • 1
    My understanding is that "represents stress emphasis of its contents", which wouldn't seem to apply here. My main goal is to understand correct usage based on the spec. – cantera Aug 01 '14 at 18:51
0

If the text should be italicized, your options are the i and em elements.

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.

http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-em-element

Vitor Freitas
  • 3,550
  • 1
  • 24
  • 35
  • In my case the title isn't in a different mood or voice, so that eliminates . And it's not conveying importance, so that knocks out . The source you cited says that "represents stress emphasis of its contents", which isn't the case here. What about and ? – cantera Aug 01 '14 at 18:45