logo标签列表

<strong>和<em>标签有什么区别？

htmlxhtmlsemantics
57

两者都强调文本。 <em> 标签以斜体显示文本，而 <strong> 则使其加粗。这是唯一的区别吗？

6个回答
74

是的，“强调”与“重点强调”的定义相对而言比较模糊。唯一的标准定义可能是“它被强调了，但更加重要！”。

个人认为<em>用于普通强调，你会以不同的语气读出强调的单词，<strong>则用于那些需要提取文本中关键词和短语，以帮助浏览文字的人们快速了解主题的内容。

这并非标准解释，但在默认的斜体/粗体样式下表达得很合理。不管你使用何种方式，请保持一致。

您写道“……不同的语调”，这意味着差异仅与屏幕阅读器有关，而不是与屏幕有关。我们是否应始终将<strong>样式设为粗体文本，<em>设为斜体文本？ - Jitendra Vyas
不过，你可以按照自己的喜好进行样式设置，但是使用粗体突出重点词汇（因为它们很显眼），使用斜体强调词汇（因为它们不太显眼）是相当普遍的。至于语气，我真正想表达的是你在大声朗读（或在脑海中阅读）时的语气，而不是与屏幕阅读器有关的特定内容（尽管它们也可以这样做）。 - bobince
5
这里（http://www.cs.tut.fi/~jkorpela/html/em.html）很好地描述和标记了“local”和“global”强调的区别。 - Rabarberski
正如Bobince所指出的，虽然没有明显的区别，但他的解释符合文学惯例，即在阅读时通常使用斜体来强调。对于粗体文本没有特定的文学惯例；在典型的网页环境中，快速浏览非常常见，因此使用粗体来突出关键词和短语是有道理的，正如Bobince所提到的。而且，尽管语义很重要，但只使用CSS来应用粗体/斜体是可以的，例如<div>Lorem <span class="bold">ipsum</span> <span class="italic">dolor</span></div>。 - squidbe
1
@Rabarberski 那个页面的解释是我听过的最清晰明了的：最好的方法可能是将它们视为“本地”强调，这应该在阅读文本时指示，但不需要跳到读者的脸上，而 strong 则用于“全局”强调，大致相反：使用 strong 标记的文本应该被突出显示，但通常在实际阅读文本时不需要强调。- 完美！ - mindplay.dk
19

<strong>是一个标签，用于在句子或短语周围放置，以表示“这比周围的文本更重要”。

<em>通常用于表示句子中单词的重音。

例如：

尽管有些人可能会说没有，但元素之间确实存在一种语义上的差别。

为了清楚地区分强调重音和重要性，并提供更多示例，请参见HTML 5草案。

规范中没有关于一个适用于单词，另一个适用于短语的说明。 - Quentin
单词和短语的区别对于我的答案来说是次要的。 - Alohci
我认为这是一个很好的答案，因为你不仅仅是陈述了一个规范，而且还更深入地解释了这两个概念的含义。 - Jason
1
这个答案中的词语差异似乎不是偶然的。我几乎看不到其他内容（除了一个外部链接）。如果要表达的重点是其他，答案应该说明清楚。这个答案的重点是区分“更重要的”和“强调”吗？在我看来，它们之间没有任何区别。据我所知，“强调”用于表示重要性的方法。 - randy
6

来自 WHATWG 的 HTML Living 标准规范：

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>
6
2
返回仅被这些标签包围的文本内容的翻译： - macbirdie
这是一个语义问题。您决定需要更多强调的文本部分，因此通过标记<em>来实现。 - Oded
我在维基百科上找到了信息：http://en.wikipedia.org/wiki/Emphasis_%28typography%29，但它只是说这是不同风格的文本。 - Jitendra Vyas
那篇文章在谈论排版，不是HTML。不要被它的外观所困扰（在大多数图形浏览器中，在应用CSS之前，默认情况下看起来如何）。 - Quentin
5
我认为这就像“你没去商店”和“绝对不要靠近锯子”的区别。它们都有强调作用，但一个更加强烈。 - Chuck
2
你需要检查HTML5草案，它更清楚地指出了强调和重要性之间的区别。 - Alohci
3
请注意，区别将会改变：

在HTML 4.01中，<strong>标签定义了强调文本的加粗效果，但在HTML 5中，它定义了重要文本。

这并没有使问题更加清晰，是吗？

不是很多。但是HTML 5草案中的示例使区别更加清晰。 - Alohci
1
可能会有所更改。它仍然是草稿。 - Quentin
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接