Grow your CSS skills. Land your dream job.

New Poll: Tag/Punctuation Placement

Published by Chris Coyier

There is probably a right and wrong answer for this, so if that emerges, I'll update this article and mention it in the results. Regardless, I don't think it's obvious, so this poll should be answered on what you currently actually do, not the "correct" answer.

Should special marks in sentences be contained within inline tags like strong and em, or outside of them.

For example:

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

Or should the question mark come inside?

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

Similar situation with commas. Inside example:

<em>No,</em> that was Melanie Griffith.

Outside example:

<em>No</em>, that was Melanie Griffith.

Tags are inside parentheses example:

In the Third Robot War (<em>see page 85</em>) human were decimated...

Tags are outside parentheses example:

In the Third Robot War <em>(see page 85)</em> human were decimated...

Comments

  1. Chief
    Permalink to comment#

    With these, the context really matters. In the first example, you’re emphasizing Cherry 2000, so the punctuation should be styled like the rest of the sentence. Same with the 2nd sample. But in the last example with the parentheses, you’re injecting information to the sentence that is unrelated to the meaning, so in that case it should all be set off with italic, including the parentheses. So really, the rule of thumb is: should the punctuation stay with the rest of the sentence, or join the emphasized type? It’s a case-by-case decision.

    • Christian
      Permalink to comment#

      I was just about to post the same reply. Well said!

      I’ve thought about this before and have concluded that it is case-by-case. What are you trying to convey to your audience? What best puts your point across?

      There will be many different answers to this.

    • There is only one correct answer for each one of these questions, it’s not an option like “my favorite color”, there are GRAMMAR RULES.
      Whoever doesn’t know them is just ignorant.

    • Matthew Chandler
      Permalink to comment#

      Those were my thoughts exactly. It makes the most sense. And you are correct, context is everything.

    • I, also, concur.

    • Good point, I didnt think about this

    • Anthony
      Permalink to comment#

      I agree, and I’m therefore jumping on Chief’s band-wagon too.

    • Michał Czernow
      Permalink to comment#

      I agree to, but not with the parentheses interpretation. Parentheses is not a part of the expression inside. It’s not also connected with the meaning of the sentence. In matter of fact the function of parentheses is separating its content from surrounding sentence. So the main problem with the example is that there’s a duplication. You don’t have to emphasize something, that is emphasized already by parentheses.

    • Michal is right. Parentheses are used to emphasize that the statement within them is secondary, and therefore are their own emphasis. Adding emphasis tags to them is redundant.

    • I must agree with that. If you want to emphasis an entire question then I guess it would have to go outside the tags, whereas if you wanted to emphasis a particular word then inside is the way to go.

      It is a very interesting discussion point, I see a Blog post coming up.

    • William
      Permalink to comment#

      Ditto. I totally agree. I voted outside, because I think that’s what I’d normally do. However Context definitely matters.

    • Jerm
      Permalink to comment#

      That sounds like it would be grammatically correct. However, if we take the question out of context into a more… normal point of view; If you are typing something, say a report, and for whatever reason a line of text needs to be italicized would you ever include a comma into the italicized text? I’m not certain if you do or not I normally don’t.

    • Permalink to comment#

      No. The general rule of thumb is that punctuation does not take the stress of a word. Only in drawn out phrases where the punctuation is included, not at the beginning or end (unless it’s a whole sentence).

      Besides that, Chris is apparently using Cherry 2000 as a title, which takes italics but not necessarily emphasis. This is a troubling HTML issue, actually, for copyeditors, but let’s leave that aside. Since he’s just doing the normal thing we do with titles (italicizing them), he only needs to apply that style to the title itself. To do so to the punctuation mark would be meaningless and even incorrect if he means not to stress the words but set them apart as a title. (Titles that take italics inside other things that take italics are supposed to be set plain, in fact, so if he wanted to emphasize the title and have it properly styled, he ought to use bold/strong.)

    • Permalink to comment#

      Haha, there was no preview and I made an assumption. Know what that gets you. Those were strong tags… I withdraw the needless aside about italics. However, there’s still no reason for the punctuation marks in these instances to take bold/italics/whatever.

      In all, yes, this could use a better example set.

  2. Permalink to comment#

    I’m obtaining from voting because the “question of the month” doesn’t end in a question mark. :-)

    • Permalink to comment#

      That said, I agree with Chief, it’s context specific. In the specific example of the question itself (parenthesis), the tags would go inside. I guess as a general rule, I would put the tags on the inside, unless the punctuation is a part of the phrase needing embellishment.

      But personally, there aren’t a lot of cases where I’ll use punctuation (parenthesis, quotes, etc.) and formatting on the same phrase.

    • Adam
      Permalink to comment#

      Err, abstaining?

  3. I vote outside.

  4. Angelica
    Permalink to comment#

    Agree with Chief..

    You should, in general, highlight only the words. But there are exceptions.

  5. Permalink to comment#

    I agree with Chief as well.

  6. Eddy
    Permalink to comment#

    Those are three different cases, so I would suggest you had a poll for each since most people will have different answers for those three and will be confused by the options.

    My answer for instance is: periods, commas, questions marks, etc. should be outside; brackets, quotation marks, etc. should be inside.

    PS The poll is a bit confusing, in the question, both “(outside)” and “inside them.” are inside. Also, in the article you speak about punctuation marks inside tags, but in the poll options, it’s about tags inside punctuation marks. No I have no idea what to pick, hehe.

    The subject is good though, it would be interesting what a language expert would say.

    • I see what you mean there… I updated the poll to put a question mark outside of the strong tags in the question. The outside/inside thing loses some context when it’s not parentheses but end-of-sentence punctuation. The point is, “inside” means the punctuation isn’t affected by the tag where “outside” they are.

    • Bert de Vries
      Permalink to comment#

      You lost me here… Inside means that the punctuation IS affected by the tag, i think, or i’m totally wrong. English is not my native language, so i could have read it wrong. Please clarify…

    • That is correct. Inside = “Inside tags” = punctuation is affected by the tags.

  7. I agree with Eddy. Perhaps the poll you created is too generic and a poll for each circumstance would provide better (or more interesting) results.

    If I had to choose, I think I’d vote for outside, but like other people have said, there are exceptions.

    Interesting topic. Can’t wait to see what you conclude form the poll results.

  8. Example #1: Italicizing the last word in a <em>sentence.</em>

    Example #2: With parenthesis I would put the tags inside. (<em>Like this.</em>)

  9. Adrian
    Permalink to comment#

    Outside.

  10. Permalink to comment#

    I vote for inside. Because otherwise punctuation marks will look strangely having different style from tag content.

  11. Permalink to comment#

    Outside, outside, inside.

    Though the first examples, it being an inserted fact, shouldn’t be bolded at all, as it really breaks the flow.

    If necessary, italics would do the job better while being less disruptive.

    • Permalink to comment#

      Agreed about a bolded parenthetical. Doesn’t make sense on a couple levels.

  12. Permalink to comment#

    I once sat through a documentation argument on this subject… it went for over an hour and got really heated!
    As Chief says, it’s dependent on context.

    • Permalink to comment#

      Ack! Documentation meetings, where you can spend an hour talking about a single punctuation mark. Someone has to decide that the law of diminishing returns comes into play around the 5m mark. ;)

  13. Im sure there is a right answer, try submitting your question to http://www.chicagomanualofstyle.org

    • Permalink to comment#

      What an awesome question -and something I think about every time I it up (or even it up).

      As for Chicago Manual of Style, seems like that would get you the Chicago Manual of style answer. What about AP, APA, MLA, Strunk & White, and Bluebook?

    • Ginger
      Permalink to comment#

      Perfect example in your post.

      In my humble opinion it is totally wrong that that last ” ) ” is bolded ! The [/strong] should’ve been inside, no doubt.

  14. Inside, always. ;)

    There is no need to highlight anything else but words. For a screen-reader (is that right?) i don’t think it makes any difference a parenthesis being or not.

  15. This isn’t an either/or question. There’s a difference between one-off punctuation like question marks and commas, and punctuation that wraps around text like parentheses and brackets. In addition, there are times to use one, and times to use another.

    Apologies in advance for going slightly off-topic here, but why not use something more semantic like the <cite> tag in your Third Robot War example? And, admittedly getting a little pickier now, the plain old <b> might be a better choice for Cherry 2000 since all you’re doing is styling the title so that it stands out, not trying to place any emphasis on the word.

  16. Permalink to comment#

    The correct answer (not necessarily the popular answer) is that
    punctuation should go outside of the boldface or emphasis except, when the entire sentence is styles.

    So, in the case of:
    Come and see me <em>today</em>!
    the punctuation would be outside the emphasis tags. But, if you had:
    <em>Holy Crap!</em> That’s a really cool blogpost.
    The punctuation would be part of the emphasis.

    And for the poster above, this is the rule, as per the CMOS. ;)

    • Permalink to comment#

      Spot on Laurie!

      I think this applies in a way to the parentheses question too. If the whole phrase is in parentheses then the punctuation should be styled but if only a section is the punctuation should be unstyled.

    • Permalink to comment#

      Perfect.

    • Permalink to comment#

      Actually, Laurie, you are not correct. The punctuation/font rule is called the “printer’s rule,” and says that all punctuation should be in the same typeface as the word that preceded it.

      The CMOS has changed slightly, but only for special cases:

      All punctuation marks should appear in the same font—roman or italic—as the main or surrounding text, except for punctuation that belongs to a title or an exclamation in a different font. This departure from Chicago’s former usage serves both simplicity and logic.

      See Q&A here.

      Outside of the Chicago style, printers have been following this convention for decades.

      According to most style guides, you would never render parentheses in bold or italics unless they are themselves part of a title, e.g. Gimme! Gimme! Gimme! (A Man After Midnight). So, if you’re adding a separate typeface to parentheses or brackets, you’re already going off the rails and might as well just do what you want.

  17. Stephanie
    Permalink to comment#

    I would put the punctuation outside of the tags in the first 2 examples, but I am not really sure about the 3rd example. I think I would put the parenthesis inside the tags. I don’t really know why I think this though…

  18. If the entire sentence is receiving special emphasis, so to should the punctuation. If only specific words receive special emphasis, do not include the punctuation — unless it is between emphasized words (such as commas and em/en dashes).

    This rule applies to links as well. For example, if your sentence, “To view more products, click here!” and click here is the link, do not include the exclamation mark in the link. If the entire sentence is the link, include the exclamation mark.

  19. I don’t know if this is relevant, but apparently in Commonwealth English it’s standard practice to put punctuation outside of brackets, but in American English it’s put inside.

    E.g.

    Commonwealth
    He was in the field (about ten miles from here), with a cow.

    American
    He was in the field (about ten miles from here,) with a cow.

    Perhaps the same can be said for tags if we treat them like brackets?

    E.g.

    Preferred in the Commonwealth
    Was that really Meg Ryan in Cherry 2000?

    Preferred in America
    Was that really Meg Ryan in Cherry 2000?

    • Okay, brackets = parenthesis.

      And I just realised in my example that a comma wasn’t needed where I put one… sorry, I’m not very good with giving examples but you get the idea. :P

    • Permalink to comment#

      I don’t think I have ever seen a comma used inside parenthesis like that.

    • Permalink to comment#

      Being an American, I’ve never seen punctuation used like that. Not even illegitimately (that I can recall, anyway).

      Of course, you have to realize that many Americans don’t even know how to use proper spelling/grammar/punctuation :) .

  20. Permalink to comment#

    When using bold, most of the time I do not include the punctuation.

    Italics and other styles may be used differently.

    Agreeing with others, context will affect this.

  21. Roger
    Permalink to comment#

    This is actually a question better suited for a “typographer.”

    • Permalink to comment#

      which is why i like to use/provide WYSIWYG’s.
      (let someone else figure that out)

    • Eddy
      Permalink to comment#

      Your post reminds me of an issue I’ve thought about. When using quotation marks like you did, should the period be inside like you put it? I would say no, because you are quoting only the work “typographer”, not the entire sentence, in which case you would have put it inside.

  22. WTF!!! please change this question, put a real pull!!!

  23. Permalink to comment#

    You are talking about emphasizing words one way or another. Since punctuation marks are not words, I do not emphasize them. I can’t think of any exceptions where I would. I also extend that to text within anchor tags.

  24. ryzy
    Permalink to comment#

    I think there is still a mistake in the poll question:

    inside example: (see page 85)

    or

    (outside).

    So which is outside?

  25. TheDoc
    Permalink to comment#

    The way the poll is worded, I have no idea how to answer, Chris! haha

    This is what I would do:

    Super fun times in Canada!

    Super fun times, in Canada!

  26. Permalink to comment#

    I think the tags should almost exclusively be inside the punctuation, unless we’re talking about a colon. I always put colons inside the tags.

  27. Joel
    Permalink to comment#

    This could also be for links too! I personal don’t think that the punctuation should be styled, unless the whole sentence is.

  28. Outside.

  29. I absolutely agree, context is the key, but I think the results might have been different if the actual question in the poll used a comma instead of parentheses.

  30. I’ve been thinking about this since you tweeted about it a few days ago.

    The way I figure it is that the emphases or the whatever you happen to be applying is being applied to the word and not the punctuation.

    Therefore in my mind it is logical to take the following set-up:

    <em>Cherry 200</em>?

  31. Sean Foushee
    Permalink to comment#

    Chief nailed it right out of the gate.

    • There is a correct answer to this.

      The style of the punctuation should always be the same as the preceding word.

      The exception is when using brackets (parentheses). If all the text in brackets is bold/italic, then the brackets should be bold/italic. If only the last word is bold/italic, then the brackets should be regular.

      Btw, an excellent book for correct use of typography is “Beyond the Mac is not a Typewriter” by Robin Williams.

  32. Eddy
    Permalink to comment#

    I’m not going to use the words inside and outside because I think they are confusing. So here is how I would do it:

    You did that for nothing?

    I said no. He was angry. Never!

    So one word: include just the word, whole sentence: include punctuation.

  33. dan
    Permalink to comment#

    Punctuation always outside

  34. I’m with the majority of commenters here. I think that strong, em or anchor tags surrounding a word or phrase should not enclose a period or comma after said word or phrase. (However, if the tags are enclosing a complete sentence, then I think the punctuation should also be inside the tags.)

    I like seeing that I’m not alone, since I was recently ordered to do it the other way. It just feels wrong.

  35. Isn’t it simply logical to put the question mark outside?

  36. Permalink to comment#

    I don’t get the relevancy of this post really. Fair enough good copy comes into play, and punctuation and grammar is important. Surely that stick to the quotations, non comma splicing and what not. This was never my thing.

    As far as bold, italics, strike-through or what ever. That to me is down to the writer and as someone pointed out above is about what emphasis and type of emphasis you are trying to achieve with given word, phrase or quote.

  37. Permalink to comment#

    another vote for inside… It reminds me of the “period outside or inside the quotations.” I usually put it inside :-)

  38. Helen
    Permalink to comment#

    It is a dilemma between layout and semantic, if the inline style has a font-style of italic or quotations marks. Typographically a comma following a word in italics has to be italicalised too. A q-Tag with font-style italic should be closed before the comma from a semantical point of view, but the font-style does not apply to it then. So you have to span the comma:


    Hello world, he said.

    But this is awful, because there is layout-style in the mark-up now. I think, this is even worse than:


    Hello world, he said.

    The comma doesn’t belong to the q-Tag, as well semantically and syntactically, but screen-readers don’t read it anyway and search engines won’t make a difference. It is a work-around.

    Another way:

    Markup:

    Hello world he said.
    Go away he shouted.

    CSS:

    q.comma:after { content: ".";}
    q.exclamation:after { content: "!";}

  39. I guess, we are emphasizing the word inside the tags rather than the whole thing. Punctuation outside the tag will be more proper.

  40. I often wondered about this issue. Then I concluded it doesn’t really matter as long as you don’t break any code in the process. You’re getting into the minor semantics of language there – but I guess that’s a good thing – keeps up web designers honest and on the straight path to glory.

    I usually wonder about quotation marks as a few other commenters on this post have mentioned. For example, what should one really use for apostrophe marks. I don’t like using dumb single single-straight-quote marks and as for right-single-quotes…I’m not entirely convinced. The whole set of possible options seem inadequate.

    Further to this line of thinking I’m curious if anyone thinks there are important characters lacking in the current set of HTML character entities? I was recently writing a photography post and it took me ages to find a symbol for f-stop. Found it in the end. Enough of this ranting. Keep fighting the good fight my geek friends.

  41. Permalink to comment#

    I usually tend to find that italic text inside non-italic parentheses just looks ugly.

    Depends largely on the font, size and usage, though.

  42. outside.

  43. Permalink to comment#

    Outside.

    I agree with Russ when he says stylized punctuation can look ugly, and depends on font, size and use.

  44. I didnt read all the posts so maybe someone has already said this but if you are optimising a site for certain keywords then the <strong> tag should only be around the word being optimised. so in that case you would avoid putting other words or symbols within it.

    As a rule for using strong tags i always put symbols outside of the tag. punctuation never looks right within strong tags in my opinion anyway.

  45. haha, i forgot html was enabled! sorry!

  46. Permalink to comment#

    Laurie’s right. There’s no reason to either italicize or bold punctuation, unless it’s part of the phrase you want to emphasize.

    In my experience, the difference between English and American punctuation has to do with quote marks, periods and commas, not parentheses.

    I heard once that the reason we Americans are so inconsistent in that regard is that we think it just looks better to have periods and commas inside quotation marks. Funny, huh?

  47. I think the perfect philosophy for this is to keep it simple and stupid. I think the first example is spot on because Cherry 2000 is the special part of the sentence. I don’t see why the question mark should be highlighted, its meaning is meager.

    As for parenthesis, I don’t think the parenthesis themselves should be highlighted, they themselves seem meager also. The words within them hold the meaning so I guess that’s the better thing to highlight. At least this is how I would approach the situation, of course others may differ.

  48. Permalink to comment#

    This is a poorly written poll. Brackets, like quotation marks, are a special kind of punctuation that can contain other punctuation, and different rules apply.

  49. James
    Permalink to comment#

    For me it depends on the context. I generally put punctuation on the outside of the tags to prevent things like Jeph stated above.

  50. Len
    Permalink to comment#

    The punctuation goes OUTSIDE because punctuation is on the printed page to send signals. To aid clarity. A comma or period tells the reader something about the flow of words and the meanings attaching to word clusters.

    Bolding and italic is also used to send signals to the reader.

    If I merge the signals sent by punctuation with those sent by tags I will confuse the reader. So, let tags send their signals as per normal and let punctuation send its signals in the usual way.

    • I think Len has a very straightforward approach that is not dogmatic. Mix this with Dan Knight’s comment and I think you have an approach this is workable.

  51. Permalink to comment#

    Surprisingly close. I thought all the experts would chime in and the Inside would get the clear lead. Maybe it’s a case of confused terminology; for example Len right above me says “OUTSIDE” meaning that the punctuation goes outside. Which is correct. But the poll calls this “INSIDE” because it’s the tags that are going inside.

    I’m afraid the results won’t be very clear when all is said and done due to the clarity.

    In any event,

    (<em>inside</em>)

    Is the way to go. Along with:

    This sentence ends <strong>here</strong>. (tags inside the closing punctuation, so “inside” according to the poll)

    (I’m praying that I’ve entered the HTML codes for gt and lt properly.)

    • Permalink to comment#

      Um. “The results won’t be very clear… due to the clarity”. Talk about ironic. Commenting systems all need the ability to edit within 5-10 minutes of submitting. ;-)

  52. Hunter Satterwhite
    Permalink to comment#

    Just like the cheese; the punctuation stands a lone.

  53. Brian
    Permalink to comment#

    I would agree that parentheses are used to separate conjoined/similar content much like the semi colon. However while I know this isn’t exactly standard practice, I always tend to use/view them as a writers after thoughts more like a mid sentence P.S.

    And while I don’t think text inside parentheses needs any more emphasis, if the writer deems it is necessary to make a point, in that case (I believe in my own skewed idea of common sense,) it should only be the content itself that is emphasized.

  54. Permalink to comment#

    How this for a right and wrong? According to Grammar Girl:

    You might be wondering what to do with punctuation marks around something in italics. In the past, you put them in italics, too, but according to the American Heritage Guide to Contemporary Usage and Style “A simpler, alternative system is to put these punctuation marks in the same typeface as the main or surrounding text” (3).

    Also:

    Another modern point that often isn’t addressed yet by style guides is that italics can be hard to read on a computer screen, so often, when you are given the option, it’s better to use quotation marks to highlight text rather than italics when you’re writing for the Web.

    There’s an audio and an article that go along with this at http://grammar.quickanddirtytips.com/how-to-use-italics.aspx

This comment thread is closed. If you have important information to share, you can always contact me.

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