views:

112

answers:

5

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?

+4  A: 

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.

marcgg
I edited my answer. Redundency is not the best solution. If you care about default style, then you should start using a good reset css and defining everything yourself ! _edit: OP removed his comment so what I'm saying in this comment doesn't make lots of sense_
marcgg
Note: If you want text bolded *and* italicised (which is what em+strong does), use either em or strong, and change their effect using CSS. That's the "clean" way...
sleske
I totally agree with @sleske, it will produce cleaner code. font-style:bold // font-decoration:italic
marcgg
+3  A: 

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>
Ben
+2  A: 

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.

extraneon
+2  A: 

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.

Andrew Noyes
+2  A: 

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.

GmonC
but if we will use css then if if css would be disabled in browser then text will not like i want
metal-gear-solid
Are you really concerned about semantic/accessibility? To fully accomplish it you should separate content, presentation and behavior layers. http://titleandsummary.com/separation-of-layers-content-presentation-and-behavior/ It doesn't make sense you being afraid of screen readers and not wanting to use css, since people with screen readers aren't interested in how the text *looks*, they are interested in what text *means*.
GmonC