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?
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
Yes, it's fine in the case you posted, because the 'strong' part is not wrapping the whole of the text. It picks out a specific part of the text.
The problem with something like:
<em><strong>something</strong></em>
is that it, effectively, it's used to make something bold and italic. In semantics, <strong> overrides <em>, making the latter irrelevant. However, in your example, the whole thing has <em>, and only part of it has <strong> as well.
Another way of explaining it is to try reading it out loud. Can you give something both empahsis and strength? Would you be able to tell the difference between saying something with emphasis and saying it with strongly with emphasis? No. However, you can say something with emphasis, and in the middle of that, say something even more strongly.
The issue is almost purely theoretical, and the only practical aspect is this: are you working in a community where other authors have certain ideas about the “semantics” of the tags? In that case, it is this community’s ideas that matter, rather than the varying formulations in different HTML5 drafts.
That is, apart from adherence to some agreed coding style, it does not matter the least. In practice, all that matters is that the default rendering is italic or slanted for em, bold for strong, and by nesting them you get bold italic. Just as you would get by using i and b the same way.
Screen readers generally ignore these types of markup. It would just be too disturbing to raise the voice or change from female to male voice for individual words, with any normally used reading speed. But if screen readers react to this markup somehow, they can do that in different ways, and they will hardly try to make any fine-grained differences.
The sample style sheet with aural features in the CSS 2.1 spec is just sketchy and at most suggestive, but it may be of some relevance to note that it uses the same pitch and but higher stress and richness for strong (and b) than for em (and i) and that it has no rules where nesting would matter. That is, according to it, strong would be rendered the same independently of whether it is inside em or not.
What you're doing is fine. You can nest tags, as long as they are correctly nested.
This is valid:
<em>You are in danger of exceeding your <strong>40GB</strong> download limit</em>
This is not:
<em>You are in danger of exceeding your <strong>40GB</em></strong> download limit
As for semantics, you're telling the browser that some of your text should be both strong and emphasized. What this will means visually depends on the browser implementation. Emphasized is usually rendered in italics, which strong will be bold.
