CODEWITHSUNDEEP
htmlxhtmlsemantics
Jitendra Vyas
Jitendra Vyas

Reputation: 152647

What is the difference between <strong> and <em> tags?

Both of them emphasize text. The <em> tag shows text as italics, whereas <strong> makes it bold. Is this the only difference?

Upvotes: 63

Views: 37077

Answers (6)

alexrogers
alexrogers

Reputation: 1584

From the WHATWG's Living standard HTML spec:

The em element

The em element represents stress emphasis of its contents.

[...]

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

Example

These examples show how changing the stress emphasis changes the meaning. First, a general statement of fact, with no stress:

Cats are cute animals.

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

<p><em>Cats</em> are cute animals.</p>

Moving the stress to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

<p>Cats <em>are</em> cute animals.</p>

By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

<p>Cats are <em>cute</em> animals.</p>

Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasise the last word:

<p>Cats are cute <em>animals</em>.</p>

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of stress emphasis also typically affects the punctuation, hence the exclamation mark here.

<p><em>Cats are cute animals!</em></p>

Anger mixed with emphasizing the cuteness could lead to markup such as:

<p><em>Cats are <em>cute</em> animals!</em></p>

Note

[...]

The em element [...] isn't intended to convey importance; for that purpose, the strong element is more appropriate.

[...]

The strong element

The strong element represents strong importance, seriousness, or urgency for its contents. [...] In this example, the strong element is used to denote the part of the text that the user is intended to read first.

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

Upvotes: 8

Arman Hakim Sagar
Arman Hakim Sagar

Reputation: 716

em: Indicates emphasis.

strong: Indicates stronger emphasis.

Its effect in user accessibility tool (NVDA).

Its also effect in SEO.

Reference: https://www.w3.org/TR/html4/struct/text.html#h-9.2.1

Upvotes: 1

Alohci
Alohci

Reputation: 82976

<strong> is a tag you'd put around a sentence or phrase to indicate that "this is more important than the surrounding text".

<em> is generally used to indicate the stress of a word within a sentence.

For example:

In spite of what some might say, there is a semantic difference between the elements.

For a clear distinction between stress emphasis and importance, and more examples, see the HTML 5 draft.

Upvotes: 19

Quentin
Quentin

Reputation: 943214

In HTML4:

EM indicates emphasis.

STRONG: Indicates stronger emphasis.

http://www.w3.org/TR/html4/struct/text.html#h-9.2.1

Upvotes: 6

Michael Borgwardt
Michael Borgwardt

Reputation: 346260

Note that the difference is going to change:

In HTML 4.01, the <strong> tag defined strong emphasized text, but in HTML 5 it defines important text.

Doesn't make the issue any clearer, does it?

Upvotes: 4

bobince
bobince

Reputation: 536359

Yeah, the definition of what ‘strong emphasis’ is compared to just ‘emphasis’ is pretty woolly. The only standard definition would be “it's emphasised, but more!!”.

Personally I use <em> for normal emphasis where you'd read the emphasised word in a different tone of voice, and <strong> for that thing where you take key words and phrases to pick them out of the text to help people skimming the text pick out the subjects.

This isn't a standard interpretation, but it makes some sense and rendered appropriately by the default italic/bold styles. Whatever you do, be consistent.

Upvotes: 75

Related Questions