Search code examples
htmlaccessibilityfont-sizesemantics

In HTML5, is it ok to use a strong tag within an em tag?


I'm currently marking up some user alerts as follows

<em>You are in danger of exceeding your <strong>40GB</strong> download limit</em>

I've found other answers suggesting that, although valid html, this is not semantically valid. But is it really not OK to nest em/strong tags in all instances? The above example seems to me to be a perfectly reasonable use - to specifically emphasise a subsection of something that's already emphasised. But can screen readers interpret this as it's meant to be interpreted, or woudl it tend to confuse them?


Solution

  • It's permissible to use <strong> within an <em>, in terms of HTML. However, within the specific semantics of your question, it wouldn't be the best option.

    Someone answered advocating using <b> with a great explanation of why it's appropriate and a link to the specs to back it up.

    The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

    But then they deleted the answer for some reason. If they want to repost their answer I'll happily upvote it and mark as the answer.

    Also, for the case where you really do want to put stronger emphasis on a subsection of an alreday emphasised passage @Alohci's comment above points out that in html5 nesting <em> tags is permissible

    Unfortunately, the semantics of <em> and <strong> have changed in HTML5 from HTML4, and this may affect the answer to your question. If you are interested in HTML5, I recommend that, in particular, you read the new definition of <em> here : http://dev.w3.org/html5/spec/the-em-element.html