English 中文(简体)
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?

最佳回答

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

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>

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?

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





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签