Poll Results: Punctuation Inside or Out?
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 agreeded upon by most commenters in the original poll article.
The punctuation is left outside of the tag because the word “today” alone is what is being emphasized.
The punctuation is inside, because the whole phrase “Holy Crap!” is what is being emphasized.
There is split evidence on this one. Some would say that because that whole phrase is an “injection” into the sentence is 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.
Punctuation in book titles always go inside the tags.
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.
