Grow your CSS skills. Land your dream job.

Poll Results: Punctuation Inside or Out?

Published by Chris Coyier

Quite a lot of people weighed in on this poll that went out in January. The question was:

Should tags like em and strong go <em>(outside)</em> punctuation characters, or (<strong>inside them</strong>)?

Like many polls around here, the question was interesting and stirred up some great conversation, but the question itself was probably flawed. There were only two choices: outside and inside, referring to placement of the HTML tags. So if "outside", in the example in the question above, the parentheses would be italicized by the <em> tags. If "inside", in the same example above, the parentheses would be regular text and the text inside them would be bolded by the <strong> tags.

What I was expecting was someone to chime in with the "absolute official rules on the right way to do it according to the typographic gods of the land." That didn't really happen. Instead the general consensus was "it depends."

As for the poll results, at the time of this writing, 6,261 people have voted and the results are 55% in favor of "inside":

It depends...

The following examples are still debatable, but these feel like the most correct way to go, as agreed upon by most commenters in the original poll article.

Come and see me <em>today</em>!

The punctuation is left outside of the tag because the word "today" alone is what is being emphasized.


<em>Holy Crap!</em> That’s a really cool blog post.

The punctuation is inside, because the whole phrase "Holy Crap!" is what is being emphasized.


Goat heads (<em>see page 85</em>) are very nutritious.

There is split evidence on this one. Some would say that because that whole phrase is an "injection" into the sentence it should be grouped with the tag (outside) and all emphasized. Other more official sources say parentheses should never be emphasized. Personally I'd go outside. Seems like there could be awkward typography tension with the last letter being italic butting up against and upright parentheses.


The books title was <em>Gimme! Gimme! Gimme!</em>

Punctuation in book titles always go inside the tags.


Was that really Meg Ryan in <em>Cherry 2000</em>?

Again it's the title alone being emphasized, so having the question mark outside is the general consensus. I feel weird on this one, for some reason I like the opposite when it ends a sentence like this and prefer seeing the question mark follow suite with the previous words. This is a case where actually <i> may be more appropriate...

HTML5 and <b> & <i>

Ever since I've been a web designer I've been scoffing at the use of the deprecated <b> and <i> tags and dutifully fixing them with the more semantic <strong> and <em> tags. This always made sense to me as we are applying emphasis with these tags, not any specific styling. For example, you might want to leave the text roman for a strong tag but apply a background behind it instead to call it out.

But now that we are pretty much ready to rock with HTML5, we see the <b> and <i> tags return. WTF, you ask? Well, that's what I thought, until you read up and think on it a bit. HTML5 is not replacing strong and em, these are just coming back in addition to them, and all four will live in harmony. In general, you'll still use em and strong to emphasize words in text, but you should use b and i when you are bolding for the sake of bolding or italicizing for the sake of italicizing.

For example, book titles in text should be italicized. Not emphasized, italicized. That is a case of italicizing for the sake of italicizing and makes more sense to use the <i> tag.

Comments

  1. How about, first, you fix the typo in the title of this article. Then folks may weight in a bit more. Just a thought. Apologies if I sound snarky.

  2. Shouldn’t booktitles then be marked up as class=”booktitle” instead of em or i?

    • Ricardo
      Permalink to comment#

      No they don’t. In traditional writing a book name (as many other things like theatre plays, article title, etc.) MUST be italicized. In web writing, as Chris said, we should use the right HTML tag <i>. That’s semantically correct. Why we should use a class for that?

    • Would it be the <i> tag or the <em> tag? Is there a difference and would either be more semantic than the other despite serving the same purpose?

    • Jon
      Permalink to comment#

      How is italics semantic? It’s a presentational style. In fact, in hand-writing, it is replaced with the semantically equivalent underline. Two presentations for the same concept. The presentation is due to the content being a proper noun representing a written work. You should definitely use a class for this as there is no tag for it.

      The presentation rules change when you have hypertext just as they change when you have hand-writing versus typography.

    • Emanuele
      Permalink to comment#

      I totally agree with Jon: go with the class!

    • Niaz Mohammed
      Permalink to comment#

      The thing is, be <em> it or <i>, should it be outside or inside…

  3. I was on a total “No b and i!” crusade until I read this: http://bit.ly/semanticbandi … and realized my markup is full of non-semantic <strong> and <em> tags. I’ve used <em> instead of <cite> incorrigibly. I’ve used <strong> for five different purposes other than, um, strong-ing. (By the way, aren’t strong and emphasis pretty much the same thing, semantically?)

    For example, my church always uses bold for words the people say in response to the presider. So in this sourcebook I’m working on, the responses go in <strong> tags:

    Let us worship God, our light and our salvation.
    <strong>The Lord is the stronghold of our lives</strong>.

    I at least hedged on the semantic-ness of that and have been making it this:

    Let us worship God, our light and our salvation.
    <strong>The Lord is the stronghold of our lives</strong>.

    I just realized you could argue that it’s ‘strong’ because everyone is saying it, which makes it louder. I dunno.

    • Permalink to comment#

      sorry, second one should be

      <strong class=”response”> …

    • Daniel
      Permalink to comment#

      wow, 2 different emails to comment the same blog! ;)

  4. Daniel
    Permalink to comment#

    Titles in general (books, movies, whatever) must allway have the punctuation inside!

  5. As a designer, I’d like to include the punctuation with the tag–it simply looks better. But the ghost of Mrs. Berry (HS English) says “no”.

    I’m glad about the <b> and <i> tags and will start using them. Semantically, it’s been difficult to distinguish between <strong> and <em>. Besides, Mrs. Berry’s ghost would want all titles to be italic!

  6. The <strong> vs <b> debate is, in my opinion, just another example of arrogant, elitist web designers that don’t necessarily care about the standards themselves, but instead reaffirm their own “ability” by scoffing at those who do not operate the same way. I’d say it’s similar to XHTML Strict vs HTML Strict: The XHTML Strict elitists will scoff at semantic, validating HTML 4.01 Strict while not having a drop of XML in their code. It’s just a part of the industry.

  7. I don’t think using the <i> tag for book titles is correct, it should actually be <cite>. According to the W3C:

    The CITE element is used to indicate the title of a book or other citation. It is typically rendered as italics. For example:

    He just couldn't get enough of <cite>The Grapes of Wrath</cite>.

    http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.7.1.1

    • doesn’t <cite> create a line break by default? without a reset, I mean. I think it’s tripped me up before when I used it in midsentence without a reset.

    • Not that I’m aware of, should be inline unless you set it to block.
      http://reference.sitepoint.com/html/cite

    • traq
      Permalink to comment#

      Even in this example, you’re not citing the book. You’re just mentioning the title. If the text read, “A good example of this writing style is found in The Grapes of Wrath…”, then yes. But, as is, no. It’s just a title and should be italicized.

    • The cite attribute is different than the <cite> element, and I think that the way the cite attribute is used is how we normally think of citing something (blockquote with cite). But according to that example I took straight from the W3C, it seems using the cite element for book titles, movies, etc, instead of just using <i> is to differentiate between just italic text and things that are more important like titles. Maybe it’s not citing how we would think of it, but it is referencing a title I guess.

    • traq
      Permalink to comment#

      hmm… I suppose, then, that I think the <cite> element should be called something else. : ) But I guess is already taken.

      Seriously, though, why use <cite> (or <strong>, or whatever) when you actually just want something italicized, especially if it’s “typically rendered” as italics anyway? &lt.em>Nothing personal</em>. I think the w3c may have gone a little overboard here with the whole “separation of content and styling” thing.

  8. Rene Hache
    Permalink to comment#

    The correct answer comes from not just knowing HTML semantics, but typography. See any good typography books for guidance on this.

    The markup should go inside in the example above.

    However, if the the content of the parentheses was a complete sentence, then it would go on the <strong>outside</strong>.

    Rene

  9. Eileen
    Permalink to comment#

    Thank you for posting this and thank you for the comments Nathan B.
    I checked out the site you recommended.
    Wow I have been doing things incorrectly but I am a newbie, so glad to have this info now!

  10. useful post.

  11. xm
    Permalink to comment#

    Years ago, when I worked in publishing, we would have set the third example like this:

    Goat heads (<i>see</i> p 85) are very nutritious.

  12. Book titles is probably one of the strongest examples you could offer in favour of <i> but is still in my opinion a flimsy argument… <i> tells us nothing other than style info.

    If we are to believe that style should be entirely distinct from markup then surely <b> and <i> should be deprecated.

    If <b> and <i> are made to be exceptions to the rule then how do we decide where to draw the line? When is it ok to use markup purely for style and when is it non-semantic?

    Personally I would prefer to keep style and markup distinct because I actually find it easier working under stricter and clearer rules. Hence why I also prefer xHTML markup. Or I guess I might just be an “elitist” as Joseph McCullough put it above ^

    Anyway, some nice insight – shame there wasn’t more of a clear consensus from the vote though.

  13. Eamonn
    Permalink to comment#

    It’s swings and round-abouts.

    Bottom line is that I’ll end up using whatever tag pops into my head first. I certainly won’t be giving <strong> a class! Readers just want to see bold text where there should be bold text – they generally won’t give a monkey’s what class of bold text it is.

    That’s not (just) the lazy way out. If you are giving that <strong> tag a class, the only one who’ll see that you did will be those reading your stylesheet – and they probably won’t thank you for clogging it up with ad nauseum classes for bold text.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".