B开发者_开发技巧oth of them emphasize text. The <em> tag shows text as italics, whereas <strong> makes it bold. Is this the only difference?

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.

<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.

In HTML4:

EM indicates emphasis.

STRONG: Indicates stronger emphasis.

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

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?

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>

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