CODEWITHSUNDEEP
xhtmlaccessibilitysemantic-markupscreen-readers
Jitendra Vyas
Jitendra Vyas

Reputation: 152647

Does it matter <strong> in <em> or <em> in <strong>?

Does it matter <strong> in <em> 

<p><strong><em>Some text</em></strong></p>

or <em> in <strong>?

<p><em><strong>Some text</strong></em></p>

Which is semantically correct and more accessible?

Update:

How screen reader would behave in both situation?

Upvotes: 11

Views: 3312

Answers (6)

unor
unor

Reputation: 96567

In (X)HTML5, the definitions/meanings are:

  • em: represents stress emphasis of its contents (changes meaning of sentence);
  • strong: represents strong importance for its contents (doesn't change meaning of sentence).

So these elements can be used together in principle.

To get an idea, think of reading a text out loud (depends on language, though): em might change the intonation (stress), strong might increase loudness.

I think semantically it makes no difference if you use <strong><em>foo</em></strong> or <em><strong>foo</strong></em>; at least I couldn't find anything related in the specification.

Upvotes: 2

marcgg
marcgg

Reputation: 66436

If you care about semantic meaning, you should avoid having both em and strong on an element.

Strong: Renders as strong emphasized text

(via)

If you care about valid HTML, both solutions are fine and valid.

Upvotes: 6

GmonC
GmonC

Reputation: 10970

In a visual effect perspective, it doesn't matter.

In semantic meaning, it matters since you're using emphasis and strong emphasis in the same element (Some text). It's the same as using h1 in some places just because you want big texts and not because they're titles.

EM: Indicates emphasis.

STRONG: Indicates stronger emphasis.

Source

The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. **Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.

So beware. Use CSS to acomplish visual effects, not markup.

Upvotes: 4

Andrew Noyes
Andrew Noyes

Reputation: 5298

Syntactically correct but not semantically correct. <strong> is an "higher order" form, so to speak, of <em>. If you're looking for the effect of <b> and <i>, use CSS. Remember to not choose elements because of how they look but what they mean.

Upvotes: 9

extraneon
extraneon

Reputation: 23950

According to w3 strong is strong emphasis. That means that em and strong should not be used together semantically as the strong is already an em.

If you believe that strong emphasis should be bold italic I think you should just add a css declaration in which you style the strong as bold italic.

Upvotes: 6

Ben
Ben

Reputation: 1127

Both ways you have listed are perfectly correct markup-wise, as long as you're not mixing up the order of the closing tags. This would be incorrect:

<p><em><strong>Some text</em></strong></p>

Upvotes: 6

Related Questions