SimpleQuiz › Part XIII › Empholdics › Conclusion

This last SimpleQuiz stirred up some great opinions. A few asked when you would ever need to emphasize, embolden and italicize test all at once. But isn’t that giving up too easily?

I think Patrick Griffiths comment sums it up nicely. And although “banana” is perhaps no better than “italic”, he brings up a good point — to stray from presentational class names whenever possible.

Just Emphasis

Remember, while <strong> and <em> oftentimes render text in bold and italics respectively, it’s not a good idea to rely on this. By default, most browsers will alter text wrapped in these elements — but if you are merely using <strong> and <em> for presentational purposes, it may be time to rethink using them.

To quote the W3C:

EM
Indicates emphasis.
STRONG
Indicates stronger emphasis.

Notice there is no mention of “bold” or “italics” here — that is intended to be taken care of with CSS. It’s all about emphasis — giving more priority to text than the rest that surrounds it. Do this first — then worry about style afterwards.

17 Comments

  1. Peter De Bouvere says:

    Me too :-)
    xhtml and css are spreading like sars. Only this is a good thing. Before you know it, IE is going to be fully standard compliant. We can only hope…
    Once again a nice touch… I’ll never use strong and em again like I did before.

  2. Ben Scofield says:

    I think the most surprising thing I’m taking away from this particular SimpleQuiz™ is the realization that, if strong and em are used inappropriately (not that I’d ever do that), the desired presentation really needs to be backed up in CSS. This is a good thing in my book, since the extra effort should help discourage such abuses.

  3. Jina says:

    I’m curious… is there a browser that does not display em as italicized and strong as bold? I do agree totally about the proper use — but I was just wondering if there were browsers out there that I am not aware of that maybe displays them differently?

  4. I forget exactly where I read about these, but I had found a place that talked about consistent semantics, and they had a whole huge list of common tags. They suggested that you use <em> for emphasis, <strong> for strong emphasis, but then create classes beyond that to distinguish:
    em { font-style: italic; }
    strong { font-weight: bold; }
    em.stronger {
        font-style: italic;
        font-weight: bold;
    }

    em.veryStrong { ... }
    .important { ... }
    You get the idea…

  5. Roger says:

    Jina: Lynx displays both <em> and <strong> as magenta. No bold, no italics. Just magenta.

  6. “A few asked when you would ever need to emphasize, embolden and italicize test all at once. But isn’t that giving up too easily?”
    No. Unless the point of the article was to ask a question for purely academic reasons, it is not giving up to suggest that even though a designer could solve this problem, they probably should never actually follow through on using that solution.
    “Notice there is no mention of ‘bold’ or ‘italics’? here – that is intended to be taken care of with CSS. It’s all about emphasis – giving more priority to text than the rest that surrounds it. Do this first – then worry about style afterwards.”
    This makes little sense to me. If it is indeed the case that there’s no style defintion on how to render em and strong tags, then the obvious solution to the puzzler would be to modify either the em or strong tags to use bold and italic. more than likely, it would be to modify the strong tag, allowing the em tag to be either bold or italic for line emphasis. (And please don’t tell me that you would need em for italic and strong bold and need a third tag… That is simply a rare case, and almost always a poor design choice.)
    I say this because you point to the banana example as something worth note, when all that example does is create more complex mark-up, and dare I say less semantically readable code.

  7. Andrei – it certainly wasn’t asked just for academic reasons. What is so out of the ordinary about text that is both bold and italic? These are pretty basic styles.
    Re: “you point to the banana example as something worth note, when all that example does is create more complex mark-up, and dare I say less semantically readable code.”
    How is <em class="banana"> more complex? It’s one tag with a class attached. I agree the attribute name is silly — but the concept is perfectly fine. And this uses the proper element (to convey emphasis) to achieve the goal.
    Commonly, one might have default style rules set for em and strong that render the text in bold or italic. That takes care of one of the styles. The addition of a class seems like a perfectly fine way to achieve the second style.

  8. Ben Scofield says:

    Andrei,
    The Bringhurst passage you quoted in your comment on the original thread doesn’t forbid the use of bolded italic text; it merely requires that you not drop bolded italic text into the middle of a normal weight roman passage. To quote: “3.5.1 Change one parameter at a time.”
    A perfectly legitimate use of bolded italics would be to represent emphasis in an extended passage of italic (or bold) text, in which case you would be following Bringhurst’s dictum.

  9. Micah says:

    I think the standard way of emphasizing a word in italicized text is to reverse the italicization, ie to make it non-italicized. This is easy to do with css if, for example, I want to italicize this word.

    <em>I want to italicize <em>this</em> word</em>.

    em { font-style: italic; }
    em em { font-style: normal; }

    And again, let me plug eschewing CLASSes in favor of nested tags. Class names, by not being defined in the DTD, are semantically meaningless to a computer, regardless of how they are named. As an extreme example, I would propose dropping class="thisisreallyimportant" in favor of:

    <em><em><em>foobar</em></em></em>

  10. Ben Scofield says:

    Yes, I’ve seen that convention – I’ve never particularly liked it, though :)
    But we’re still left with the problem of emphasizing a part of a bold passage.

  11. darrel says:

    Andrei – it certainly wasn’t asked just for academic reasons. What is so out of the ordinary about text that is both bold and italic? These are pretty basic styles.
    It’s bad typopgraphy/writing style. There’s really no reason to make a sigle item (a world, a passage, etc.) BOTH italics and bold. From a visual design standpoint, you pick one or the other.
    If you are finding yourself using both, take a step back and ask yourself why.
    A perfectly legitimate use of bolded italics would be to represent emphasis in an extended passage of italic (or bold) text
    I agree. So, in this situation, wouldn’t:
    {cite}This is the sample passage where I want to {em}bold{/em} a single word{/cite}
    …make the most sense? Style the tags to your hearts content. (BTW, a suitable alternative would be to NOT italicize the item you need to emphasize, but I digress…)

  12. Jina:
    > I’m curious: is there a browser that does not display em as italicized and strong as bold?
    AvantGo on older hand devices such as Palm Vx can’t display italic text. Both em and strong are rendered bold.

  13. Not to worry, Andrew — you will be sick of hearing about the book very soon ;-)

  14. Andrew says:

    I’m excited for it… I can’t believe I made a grammar error in a 19 word comment… and I forgot to end my A href

  15. Stacy says:

    Is there a reason why SimplePost is no longer up anymore? Is there any place I can get this?

  16. Dave Calam says:

    And the next SimpleQuiz—designed to really piss of the typological purists: What is the correct mark-up for letterspacing blackletter text?