SimpleQuiz › Part XIII › Empholdics

Emphasis, bold, italics. What if you needed to handle all three at once? (bogus method used for the preceding example ;-)

Here are three options (plus any additional
scenarios you can think of). Note that the <strong> element could be swapped for the <em> element in these examples (the reverse), depending on what level of emphasis you were trying to convey.

The idea: choose <em> or <strong> to convey the correct level of emphasis, then apply the additional style that’s desired, whether that be italics or bold.

Q: Which method would you choose for handling emphasis, bold, and italics — at the same time?


  1. <strong><em>Empholdics</em></strong>

  2. <strong><i>Empholdics</i></strong>

  3. <strong><span>Empholdics</span></strong>

    With:


    strong span {
      font-style: italic;
      }


  4. <strong class="italic">Empholdics</strong>

    With:


    .italic {
      font-style: italic;
      }

52 Comments

  1. Ben Scofield says:

    I’d vote for none of the above and go with the following to get ‘em all at once:
    <em class=”empholdics”>Empholdics</em>
    with the rule:
    em.empholdics {
    font-style : italic;
    font-weight : bold;
    }
    Remember, the treatment of strong and em text is browser-specific; there’s nothing in the spec that mandates the former appear in bold and the latter appear in italics.
    (I used <em> in my choice because the desired behavior was ‘emphasis, bold, and italics’ instead of ‘strong, bold, and italics’.)

  2. Matt Haughey says:

    I’d go with option A due to the semantics in the code. In a text browser or mobile display, they’d still get the same emphasis instead of leaving it up to a stylesheet that would be ignored.

  3. I have to agree with Ben. Semantics comes first (and I’ve always found the idea of “strong” text a little vague). Ben’s point is even more clearly made if you were to carry this example over to a <cite> tag, where you may want a different style for a book title (e.g. underlined for class="book") than for a magazine article title (e.g. enclosed in “” for class="article"). What really matters is the information describing the word, phrase or title — the semantic meta-information — and, in this case, a classed <em> fits the use.

  4. Option A. At least, that’s what I’d use on my site.
    Then again, you could always use <b><i>Empholdics</i></b> and while that isn’t semantically correct it should render properly in any browser and the code is very straightforward.

  5. I’m curious how A would come across in screen readers. I suppose it would be read louder and faster. The same would go for devices that would ignore the stylesheets.
    However, part of me says fewer tags is better, and in that case, I agree with Ben in using a styled <em>.
    It’s a tradeoff, have an extra class defined, or use an extra tag in your content.
    In the end, I would probably side with all around accessibility and go with choice A.

  6. Egor Kloos says:

    Ah here we go… if this quiz question doesn’t start a fist fight I don’t no what would.
    I’ll pick answer [D]. Not that I like it, I don’t think that is right either. But close enough.
    [A] can’t be right because it doesn’t necessarily apply the italic text. Yes, I know that <em> is often shown to be italic but that is a distinction made by the browser itself and not by HTML markup or CSS. Don’t mistakenly assume that the italic rendering by the browser is mandatory.
    [B] almost gets it right but where is the phrase element <em>? As in emphasis. Remember emphasis isn’t italic and italic isn’t emphasis.
    [C] I don’t like it because of the <span>. It doesn’t need to be there… that was easy :)
    [D] I don’t really like this answer either because <strong> is also a phrase element like <em>. The bold rendering is not mandatory.
    Personally I would do it this way:
    <em class="bold italic">Empholdics</em>
    .italic {

  7. blakems says:

    I would go with ‘A’, but I think it depends on how you are intending that word or phrase to be used. If it is for just presentation than I would use the style sheet. However if it is something you want emphasis on when read than use the em and strong.
    I like to think how I would want a screen reader to interpret the text and decide from there what to use.

  8. Egor Kloos says:

    Sloppy me, first I noticed that Ben had already shown that none of the answers really fit. And had given a similar answer. Then I saw that I made a mistake in my own proposal. It should read:
    .bold {

  9. AllSpiritsEve says:

    I would go with option [A], but add css rule as follows:
    strong em {
    font-style: italic;
    font-weight: bold;
    }
    That way the [x]html is semantically correct, and is also displayed properly.

  10. Tobias says:

    I think I would use the <strong> alone + css, since it means “strong emphasis”

  11. [A] is kind of daft because you can’t really emphasize something that is emphasized – it doesn’t make sense.
    [B] – i bad.
    [C] has unnecessary markup.
    [D] is almost there. The thing is, if you want emphasis then you use em or strong. So that’s the emphasis part of the element sorted. The next step is to style that emphasis, so the CSS applied to it should be font-weight: bold; font-style: italic;. BUT, the class name should be something that doesn’t suggest presentation. What if you wanted to change the style later? It is similar to the suggestion that you are missing the point of CSS if you use something like ‘blue’ for a class name. So I suggest:
    <em class="banana">Empholdics</em>
    and
    .banana {
     font-weight: bold;
     font-style: italic;
    }

    …or whatever else that doesn’t suggest the presentation…

  12. David House says:

    Well if we’re serving as application/xhtml+xml why not make up our own tag? Something like,
    <stronger>hello world</stronger>
    with the corresponding CSS:
    stronger {
    display: inline;
    font-style: italics;
    font-weight: bold }

  13. David House says:

    #11: You should still use descriptive class names, so maybe <em class="extrastrongemphasis">? Or something shorter, but not something abstract.

  14. #13: agreed. My example was… erm… for banana sellers who want to emphasize differnt types of banana…
    Presentation doesn’t apply any meaning to an element so ‘extrastrongemphasis’ doesn’t necessarily mean something is extrastonglyemphasized. A blind person isn’t going to know that it looks any different to any other emphasis.
    If you wanted to specially highlighting something specific, such as bananas then ‘banana’ isn’t abstract.

  15. Joey says:

    I agree completely with Patrick Griffiths. It needs to be a single tag (whether you use strong or em doesn’t matter really) with a class attribute that has an semantic name. I would suggest “.important” or “.stronger” because they both explain what you are trying to do, but they don’t suggest style at all. That way you don’t have to rename the class if you want to change the style of important text in the future.

    <style>
      em.important {
        font-style: italic;
        font-weight: bold;
      }
    </style>


    <em class="important">Important Text</em>

  16. Egor Kloos says:

    Love that classname “banana”. I promise to work that into a project. Just to see if I get caught. :)
    It could be a good quiz question. How do you name your class and id selectors? Is there a right way? Should we always name and group such things them same way for each project? Just a thought.
    Anyway, the more I look at answer [B] the more I realise that I should always apply a style on such phrase elements like strong and em. Just because different browsers happen to render them the same way doesn’t mean that I can be lazy and assume that it will always be okay. I know it sounds a bit paranoid but there you have it.

  17. Ben Scofield says:

    Actually, Egor, you don’t always need to add style info to strong and em – it’s just when you’re using them solely to get bold and italicized text that you need to back them up with CSS.
    After all, however a browser chooses to render them they should always come out strong or emphasized in some way.
    Of course, if you are using strong and em in this way, you’re not really using them semantically; they’ve just become (unstable) stand-ins for the presentational b and i tags, and you may actually be better served with a span.
    ASIDE: I wonder how many sites would look screwy (mine included, I now realize) if they were viewed in a browser that swapped the normal interpretations of strong and em (so strong text was italicized and em text was bolded). Such an implementation is consistent with the specs, after all…

  18. Eric TF Bat says:

    All right, call me a heretic if you like, but my philosophy is this: if I want my text to be bold, I use the correct HTML tag for bold text, which is <b>. I don’t use <strong>, because regardless of the fact that every browser I’ve seen considers them to be synonyms, I don’t. “Bold” means “extra-thick, extra-dark lines”. “Strong” means something more nebulous, relating more to the emotional impact than the physical pixels. When I want bold, it’s bold I want. When I want italics, it’s italics I want. The <strong> and <em> tags, to my mind, are LESS semantic, because in this case the semantics (the meaning) of “bold” is “bold”, nothing more or less.
    Sure it doesn’t show up in screen readers. Why should it? The impression I want to give is of a visual effect. If I wanted a loud beep and you were deaf, would you expect me to put “BEEP” in large friendly letters on the page? What purpose would it serve? The beep is the beep, the bold is the bold, they don’t mean anything more than that.
    So my vote is: <b><i>empholdics</i></b>, and Zeldman be damned.
    (I don’t mean it really Jeffrey – I still love you, honest I do!)

  19. vlad says:

    choice a.
    it conveys all of the semantic meaning with the correct tags and still does its job with css disabled.

  20. This is a trick question right? You really are not asking it, and people are really not answerinng it, right? It’s all a bad dream, right?
    From Bringhurst’s Elements of Typographic Style, page 60:
    ———-
    3.5 Contrast
    3.5.1 Change one parameter at a time
    When your text is set in a 12 pt medium roman, it should not be necessary to set the titles or heads in 24 pt bold italic capitals. If boldface appeals to you, begin by trying the bold weight of the text face, u&lc, in the text size. As alternatives, try u&lc italic, or letterspaced small caps, or letterspaced full caps in the text weight and size. If you want a larger size, experiment first with a larger size of the text face, u&lc in the text weight. For a balanced page, the weight should decrease slightly, not increase, as the size increases.
    ———-
    So the correct answer to this riddler is obviously None of the Above.

  21. François B. says:

    I don’t use bold italics.
    You do ?

  22. Micah says:

    I always look forward to Simplebit quizzes, especially the follow-up summaries. Always intelligent commentary.

    As for this question, put me in the pool of people echoing Ben‘s answer, but only in principle. The styling should be done with CSS, and should be done explicitly so it won’t be trumped by default browser stylesheets that are different from the current standard (strong=bold, em=italic).

    But I’m uncomfortable with the STRONG tag, and I like to avoid CLASSes and IDs whenever possible, so let me suggest a different markup:

    <em><em>Empholdics</em></em>

    em em { font-weight: bold; font-style: italic; }

    For my own weblog, I have nested EMs styled as non-italicized bold because I’ve read Andrei‘s quote before, but for the purposes of this demonstration I think we can stretch the guidelines a little.

  23. Jeff Minard says:

    I’m going to have to go with AllSpiritsEve and vote A on this one.
    A
    -or-
    <strong><em>A</em></strong>
    With CSS setting them to the right attributes (since we don’t trust browsers to do it.)

    strong { font-weight: bold; }
    em { font-style: italic; }

    In this way you get the correct rendering with style sheets, you’re likely to get correct rendering without style sheets, it’s semantically correct, and any aural devices will emphasize/strengthen it as well.
    Most people seem to be objecting to the fact that your are trusting the browser to set it to display right. However, i would *assume* that whether they make em tags bright red, and make strong tags 200% size, that even then you would end up with a 200% sized red text. Which would show both it’s emphasis and it’s strong.

  24. John Davis says:

    Eric TF Bat has a good point:
    “the semantics (the meaning) of ‘bold’ is ‘bold’, nothing more or less.”
    I find that “emphasis” and “string” are watery, vauge terms that don’t apply to my reasons for wanting to make italic text italic or bold text bold. With italics, especially, my goal is sometimes not to emphasize anything, but to communicate something only italics can. Like, for instance, that the word is the title of a novel. Or that a character is thinking, not speaking aloud.
    At the same time, Andrei hits it right on:
    Who the heck makes text bold and italic at once?
    But, if I were going to do it, I’d mark it up like so:
    <b><i><em>Empholdics</em></i></b>
    This contains the all the semantic meanings: that the text should be bold and italicized, and that we wish to emphasize it.

  25. John Davis says:

    Er.. that’s strong, not string.

  26. Benjamin says:

    I depends on the site I guess
    if its a small 5 page brochure site then I would just use <strong> and <em>
    however if it was a proper site with 30+ pages and there were differences in the text that required something ot be bold italic and it was repeated I would use a <span> class like
    .boldItalic{font: bold italic 12px verdana, helvetica, sans-serif;}
    *note just an example
    this way its very reuseable allows you to keep your standard <strong> and <em> and becomes more customisable.

  27. Owen says:

    I’m with Micah. Nested emphasis means ‘more emphasised’ to me, and on my own site I’ve set up styles to that effect. If I remember correctly, XHTML is going to drop <strong> since it’s made redundant by <em>. In fact, it only causes more problems – to those who style the selector ‘strong em’, will you do the same for ‘em strong’? Are <strong> and <em> commutative?
    From a semantic point of view, empholdics will have a meaning like one of ‘styled with no emphasis’, ‘normal emphasis’, ‘strong emphasis’, ‘very strong emphasis’… determining which one is appropriate for the situation will guide your use of the correct tag(s).

  28. TOOLman says:

    I’m with Ben Scofield on this.
    The quiz asked for a way to handle emphasis, bold, and italics at the same time.
    [A] Wrong. Implements emphasis over strong emphasis. Does not implement bold or italics.
    [B] Wrong. Does not implement bold.
    [C] Wrong. Does not implement bold. Also uses an unnecessary, semantically empty <span> element.
    [D] Wrong, but the best of the lot. Does not implement bold, and the class name is presentational.
    Eric TF Bat has the right idea, but uses the wrong language. :) Bold and italic is presentational and should be handled by CSS, not HTML.
    Ben’s example, with its “semantic” class name, is right on. In a screen reader, you would get the desired effect, which is emphasis. Bold and italic is meaningless in a non-visual environment.
    /Tommy

  29. Jazeps Basko says:

    I aggree with this: http://www.simplebits.com/archives/2004/02/26/empholdics.html#comment11
    except for using .
    I’d use or smth. alike (some better word for class name) instead. XHTML can’t be semantically perfect with those tags alone. These are class names that make it semantically correct so you must not be afraid of using s and s with class and id attributes. You’d better watch out using the mixed ones:
    + class defining it strong or + class defining it emphasized.

  30. “Emphasis, bold, italics”. That’s meaning, presentation, presentation. Markup, style, style. HTML, CSS, CSS.
    That rules out [A] and [B] (assuming as we should that presentation is the realm of CSS), makes [C] unnecessary and [D] the (near) winner.

  31. As with all mark-up issues, it’s a case of asking the right questions.
    Embolding and italicising are both presentational techniques and should therefore be handled in the stylesheet. That’s the easy bit, and non-negotiable.
    The tricky bit is indicating emphasis in the mark-up. The question to answer is: ‘Why am I emphasizing this?’, or taking a step back: “Why should this text be bold and italic?” this answer should logically lead to the required mark-up.
    For example: if emphasis is required because the text is a top level heading than you use an H1 and style it appropriately.
    If the emphasis is required because the author is using a phrase to make an important point then combinations of STRONG and/or EM should be used and styled accordingly.
    In an ideal world these decisions are made at a Style Guide level. Even more ideally two guides – one for mark-up which defines whether STRONG and/or EM and/or both can be used and under what circumstances. And a second guide which says hows those combinations should look.

  32. darrel says:

    I don’t always agree with Andrei ;o), but he’s absolutely correct here here. This is just sloppy typography.
    The only time you’d need to do both, is if you’re highlighting something in an already highlighted block of text:
    …and so he said, today is the day we fight!
    …at which point, the standard HTML tags are what are appropriate.

  33. darrel says:

    dammit.
    {cite}…and so he said, {strong}today{/strong} is the day we fight!{/cite}

  34. Wayne says:

    The proper thing to use is simply <em&gt, as it allegedly provides some semantic benefit. Bold and italics can be styled via CSS. But what do we really gain by doing this? Proper use of headers (<hx>) helps generate outlines and provide order; Mark Pilgrim famously demonstarted how <cite> could generate a citations page; and <abbr> helps non-traditional browsers correctly announce abbreviations (and may also be useful in generating a technologies index). But, what benefit is realized by making the distinction between italicized text and emphasized text? I frequently emphasize single words and short phrases that would be useless out of context, so a list of emphasized content isn’t appropriate.

    Ideas?

  35. David says:

    This is all about opinions, isn’t it?

    First, The examples used for decision seem to me to be bad semantically. I can never see a reason to have two tags to indicate emphasis for only one word. I think a stylized span tag works best for that. I’d rather the example were something to the effect of: Quiz on Empholdics - how to indicate emphasis.

    I always think of it in terms of what I would want a “perfect semantic search engine” – which doesn’t exist – to find or present. To me, keywords for a document should first come from headings, then strong tags, then emphasis tags, and then quotes and citations.

    Result:
    <em><strong>Quiz on Empholdics</strong> - how to indicate emphasis</em>

    Or Quiz on Empholdics – how to indicate emphasis. This would be semantically different than Quiz on Empholdics – how to indicate emphasis.

    If styling variations are desired, use CSS, obviously, and if styling is desired without the emphasis, use b and i tags.

  36. as with anything, my first question would be: what’s the context ? why are you wanting to have it bold and italicised ? purely for visual reasons, or for more obscure ones (it’s a very important book title, for instance, or something like that). as has been said before, semantics should always come first…otherwise we may as well start using blockquote tags to get some indentation, for heaven’s sake…

  37. Matthew says:

    Oi vay, if you need to handle emphasis, bold and italics at this same time the answer is obviously:

    <em><b><i>Empholdics</i></b></em>

    The <em> is for the emphasis, the <b> is because the question specifically stated “bold” and the <i> is because the question explicitly specified italics.
    How can anyone disagree with that?

  38. Joey says:

    Anyone who wants to separate meaning from presentation will disagree with you completely, Matthew.
    HTML is moving closer to a completely semantic language, where layout and style are specified only in the CSS file. The <b> and <i> tags don’t specify any meaning other than bold and italic, which is obviously presentational in nature. Therefore, more and more HTML/CSS designers are using <strong> and <em> because they mean something other than presentational, and can be given any style you wish.
    What if in the future you wanted to change the way your “empholdic” text looked? Maybe you’ve decided bold and italics are too much, and now you want to change it to red and underlined. Well, if you’ve done it your way you’ll have to go through your whole document (or possibly many documents) and rip out a bunch of <b> and <i> tags. While you’re at it you may as well be replacing them with <font color=”red”> and <u> tags!
    If you had done it the way Ben Scofield originally demonstrated, you could simply change one CSS class and be done with it. This is why separating meaning from presentation is so desirable.

  39. Andrew says:

    A is my favorite but personally I would do it all in CSS as the first guy recommended

  40. “The and tags don’t specify any meaning other than bold and italic,”
    Given the nature of CSS and how tags work, one could rewrite the bold and italic tgas to be whatever they wanted, just like any other tag. It may not be “semantically” correct, but it is possible, right?

  41. Dan Fascia says:

    Semantics really get on my nerves to be honest… What is more logical to the human layman understanding?
    for italic or for italic?
    for bold or ?
    If we had started out using em and strong then fine, but word processors dictated the way we format text in the early days before the web – they use Bold and Italic icons.
    That is what most people therefore understand and will translate best to most comprehensions.

  42. Ben Scofield says:

    But Dan, (X)HTML and CSS aren’t meant for people – they’re meant for browsers (just like programming languages are meant for computers, not for people). We can’t rely on what is most understandable for people (much less a lay audience) to decide such matters.
    Let’s look at this from a slightly different angle: the end goal of all our efforts is the deliver of content to users, correct? (X)HTML allows you to mark semantic relationships between pieces of content. Such semantic markup is good because it helps to ensure that no matter what tool an end user employs to access the content, there’s at least a fighting chance that those relationships will be preserved. We as content producers can then go in with CSS and make it look certain ways in this or that sort of tool with media declarations, but even without such tweaks if the markup is semantically correct we can be sure that the whole of the message (including the relationships) will remain intact. Using presentational markup breaks that guarantee.

  43. Fredrik says:

    Empholdics
    Would be correct if the matter is to emphasise the word in question.
    Using tag would require changing the HTML-code afterwards if we don’t want a strong italic word there.
    I assume the goal of the example it so emphasise a word. Emphasising the word with is the most natural selection, as that’s what it’s there for. We can simply edit the em tags appearance with CSS.
    Using span is just a malicious workaround. It’s probably most practical, but adds several extra characters.
    D would probably be the best solution in terms of your own usage. The class should be named something like .em to represent the USAGE of the class, not the appearance of it. If the word later on is going to be made twice and big, bold and colored red. The class .italic makes little sense.
    I’ld say A in terms of semantic. But the most perfect method would simply be:
    Empholdics.
    Since that’s what the EM element is used for, to emphasise words. The visual appearance (italic, bold, underlined) can be changed via CSS.
    Using several tags would be pointless, unless we strictly want a CSS-less presentation.

  44. Matthew says:

    Joey, I understand the concept of XHTML and understanding on concept from presentation very well.
    The question, however, did not state the context of the reason to make something bold, italic, and emphatic. With that in mind, how can >em class="empholics"<, while perhaps more practical, be any less valid than >em<>b<>i<?
    This particular SimpleQuiz™ is too poorly articulated to reach any kind of conclution.

  45. Matthew says:

    *sorry, that’s "conclusion"

  46. Matt Warren says:

    I don’t know if this has been suggested yet, but I would simply use the <em> </em> tags. Then in the style sheet, redefine the em element like:
    em {
    font-weight: 600;
    font-style: italic;
    }

    For code purposes, the text is labelled as emphasized, and visually it is both bold and italicized. <em>Empholdics</em> would thus accomplish the bold/italic emphasis effect with minimum amount of code and utmost cleanliness.

  47. “This particular SimpleQuiz is too poorly articulated to reach any kind of conclusion.”
    Well, this one is just as vague as the others — but it’s intentional. If I gave too much context, the question is bound to answer itself. I’d much rather stir up controversy to bring out opinions that might otherwise be unnecessary.

  48. I don’t know if this has been suggested yet, but I would simply use the <em> </em> tags. Then in the style sheet, redefine the em element…

    That’s what I was trying to say above, so I agree, though, unlike with other semantic elements, I don’t think you’ll see overwhelming benefit choosing this over any of the other ideas here. Still, although <b> and <i> are technically legal XHTML tags, using any tag purely for presentational purposes ignores the oft-lauded spirit of the docs.

  49. This really depends on whether you want a higher level of emphasis than strong or just bold and italics. If it is the latter than just go with <b><i> or a span with appropriate CSS depending what browsers your target audience uses. If you are indeed trying to indicate stronger than strong emphasis, then you can forget about doing that semantically. There are only two levels of emphasis, em and strong. Wrapping one in the other is like writing <one><two/></one>. This does not yield <three/>. Just use the highest possible emphasis, strong, and add a CSS rule. Choice D.

  50. Confused says:

    I realize this is a couple of weeks out of date, but just in case anyone still reads all of the comments as I have just done:
    I don’t design webpages professionally. I just want to get my ideas out there on the web. Persoanlly, I’d rather use pure HTML, but since some browsers can’t even be bothered to follow that standard correctly, I’ve branched out… CSS I can handle, XHTML I’m not so sure on.
    The one thing I didn’t hear mentioned in the whole “content vs presentation” argument (from which comes the “don’t use ‘b’ and ‘i’ tags” edict) is this: shouldn’t your markup degrade nicely?
    If I want a word or phrase to stand out, it makes sense that it should stand out regardless of context. So: what if someone is using a browser that doesn’t handle CSS? If the CSS is solely responsible for making something be bold or italic, and CSS isn’t working, something is lost.
    Something I don’t think anyone expressed clearly: sometimes an italicized word does not represent a presentation style applied to some content, it represents content that is semantically different from the unitalicized word. In this case, I feel that the italicization (or whatever) belongs down in the body of the text, and the ‘i’ tag just happens to do just that, so…
    The discussion got a bit abstract up there, here is an outsider’s summary: content should be separated from presentation. (This is the fad of the day, but it is a logically good one and will probably last). It seems like people are arguing that content should should also be separate from *meaning* (or *intent*?)… which is a hell of an abstraction. Tags such as ‘strong’ and ‘em’ appear to be an attempt to encode meaning into markup, but they are poorly defined and not consistently implemented and should therefore GO AWAY. If true accessibility is required (as for sightless viewers) then either additional markup is required, or some standardized conversion from compliant markup should be developed.
    Once again as an outsider, it seems to me like a lot of you are getting hung up on blind adherence to whatever rules are the fashion today without thinking about what information the page is supposed to convey… if, for example, an italicized word represents different *information* from the plain word, then the italics do not simply represent presentation and should not be removed.

  51. I just came to this, and having read all the opinions, I’m with Micah (comment #22) and others who feel that nested emphasis is the way to go. You can even go to triple emphasis (with CSS set to display it as all uppercase) for uses such as in dialog when people yell louder and louder.

  52. D is closest, but I agree that presentation class names are bad juju. I would prefer option E where the strong element remains a pure strong and is styled additionally using decendant selectors that would refer to a parent. Or, just D with a better class or id name.