"<b>"和"<strong>"，"<i>"和"<em>"有什么区别？

Question

在HTML/XHTML中，<b>和 <strong>，<i>和 <em>之间有什么区别？在什么情况下应该使用它们？

- Toytown Mafia

---

参见：http://programmers.stackexchange.com/a/255588/12693 - Kos

至少目前为止，我在StackOverflow上看到的所有内容都是使用<b>元素加粗的。 - OverCoder

MDN有关于这些标签如何使用的清晰描述（附有示例）：<em>, <strong>, <b>, <i>。 - totymedli

屏幕阅读器将会以口语强调的方式发音<em>中的单词，使用口头重音。 - Lexus de Vinco

Answer 1

它们对于普通的网络浏览器渲染引擎具有相同的效果，但它们之间存在根本性的区别。

正如作者在讨论列表帖子中所写：

想象三种不同的情况：

- 网络浏览器 - 盲人 - 移动电话

“Bold”是一种样式 - 当你说“bold a word”时，人们基本上知道这意味着在字母周围添加更多的“墨水”，以使它们在其他字母中更加突出。

不幸的是，这对于盲人来说毫无意义。在移动电话和其他PDA上，文本已经很粗体了，因为屏幕分辨率非常小。你不能使一个粗体变得更粗体而不破坏任何东西。 是一种样式 - 我们知道“bold”应该是什么样子。 <strong>然而，它表示应该如何理解某些内容。“Strong”在浏览器中可能（并经常）意味着“bold”，但在像Jaws（盲人）这样的语音程序中，它也可能意味着更低的音调，或者在Palm Pilot上用下划线表示（因为你不能使一个粗体变得更粗体）。

HTML从来不是关于样式的。搜索一些"Tim Berners-Lee"和"语义网"相关的内容。<strong>是语义化的，它描述了它所包含的文本（例如，"这段文本应该比你显示的其他文本更加强调"），而不是描述它所包含的文本应该如何显示（例如，"这段文本应该是粗体"）。

- splattne

---

请注意，HTML5 中的 <b> 和 <i> 标签 未被弃用。它们的新用途是语义上表示样式（或预期呈现方式），而 <strong> 和 <em> 则表示结构。您必须阅读 http://stellify.net/html5-b-and-i-tags-are-going-to-be-useful-read-semantic-again/。 - Natan Yellin

回答很好，但我认为“你不能将粗体加粗”是错误的，因为你假设它是一个布尔概念，而font-weight：采取更多变的方法。现在高保真屏幕存在，有不同级别的粗细程度。 - TravisO

我相信他在谈论Palm Pilot的具体技术限制。 - Brian Ortiz

我不相信一堆字母有任何固有的意义，如果我们决定的话，<b>和<strong>可以具有完全相同的语义意义。阅读器的制造者决定了什么？他们是以不同的方式处理它们还是完全相同的方式？ - Aprillion

但是它们确实有意义！HTML的定义并不由你的信仰或决定来决定。 - Mr Lister

Answer 2

和标签是显式的，它们分别指定粗体和斜体。 和标签是语义化的，它们指定封装文本应以某种方式“强调”或“突出显示”，通常是粗体和斜体，但允许通过CSS来控制实际的样式。 因此，这些在现代网页中更受青睐。

- Tony Andrews

---

好的解释。另一方面，使用HTML 5时，<i>和<b>也是语义化的，而不是显式的。哎。 - OregonGhost

是的，我读过的最好的解释是http://stellify.net/html5-b-and-i-tags-are-going-to-be-useful-read-semantic-again/。 - Natan Yellin

HTML5为b和i标签赋予了新的语义含义。当你需要突出某段文字或者将正常文本偏移时，应该使用这两个标签（而不是使用em来表示强调、用strong表示重要性，或用mark表示相关性）。b用于关键词、产品名称、可操作性文字等，而i则用于技术术语、思想、短语等。但在我个人看来，这两者之间需要有更大的区别。 - chharvey

太糟糕了，大多数廉价办公室显示器和配置下的stellify.net文本（以及标题）完全无法阅读^^（缺乏对比度真是令人惊讶） - Oskar Duveborn

所以 <b> 曾经真的用来设置样式吗？ - Minh Nghĩa

Answer 3

<strong> 和 <em> 可以为您的文档添加额外的语义含义。它们也可以给您的文本添加加粗和斜体风格。

当然，您可以使用 CSS 覆盖它们的样式。

<b> 和 <i> 只适用于字体样式，不应再使用。（因为您应该使用 CSS 进行格式化，如果文本真的很重要，那么您可能会将其设置为“strong”或“emphasised”！）

希望这有意义。

- Engram

---

如果您说<b>和<i>不再使用，那么那些不支持<em>和<strong>的旧浏览器怎么办？ - Nirman

如果有人使用老旧的浏览器来浏览网页，从视觉和安全角度来看，他们已经面临许多问题了。因此，我认为程序员和设计师不应再支持老旧的浏览器。 - yeyo

注意：如果我们说“旧浏览器”，这里指的是Netscape 3和IE2（因为IE3和NS4已经支持了<strong>和<em>）。如果您确实需要继续支持那些20世纪的浏览器，那么您将会面临很大的麻烦。 - Mr Lister

“<b>和<i>另一方面仅适用于字体样式，不应再使用。”官方的HTML5文档表示相反。需要引用来源吗？ - user719662

这篇答案是在HTML5发布前大约6年发布的！ - James

@James，这并不意味着你不能做以下操作：a）更新其中的新信息，b）编辑并强调它所涉及的标准/版本，并注明它已过时。 - user719662

Answer 4

我要冒险发表一个历史和实际的热点观点：

是的，根据规范，HTML4中<strong>具有语义意义，而<b>则具有严格的展示意义。

是的，随着HTML5的出现，新的语义意义略有不同的b和i被介绍了。

是的，W3C建议——基本上——简而言之，请勿使用b和i。

您应该始终记住，b元素的内容可能并非始终为粗体，i元素的内容可能并非始终为斜体。实际样式取决于CSS样式定义。您还应该记住，在某些语言的内容中，粗体和斜体可能不是首选样式。如果有更详细和相关的标签可用，则不应使用b和i标签。

但是：

真实世界的互联网存在大量已经存在但永远不会更新的HTML。真实世界的互联网必须考虑由各种开发人员团队构建并在不同时代构建的各种软件和CMS系统之间生成和复制的内容。

因此，如果您正在编写HTML或构建一个为他人编写HTML的系统-确实-绝对使用<strong>而不是<b>来表示“强调”，因为这更正确。

但实际上，由于必要性，<strong>和<b>的语义和样式含义随着时间的推移逐渐融合。

如果我正在构建允许任何粘贴样式文本的CMS，则需要计划为那些在<b>中粘贴并意味着“强调”的人以及为那些在<strong>中粘贴并意味着“使此文本加粗”的人。这可能不是“正确的”，但这是目前真实世界运作的方式。

因此，如果我为该站点编写样式表，我可能会编写以下样式：

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

或者说，我将依赖于浏览器的默认设置，在我所知道的现代浏览器中，它们会像上面的代码一样执行。

或者说，我可能是数百万个使用 normalize.css 的网站之一，该样式表确保 b 和 strong 被同等对待。

在世界范围内已经有如此庞大的 HTML 存在，它们都基于这种预期工作，我无法想象 b 会被弃用并以strong取而代之，或者浏览器会从默认情况下开始以不同的方式显示它们。

这就是我的见解，关于语义，历史和现实世界。 b / i 和 strong / em 是相同的吗？ 不是。 它们在几乎所有情况下可能都将被视为相同直到现代文明的崩溃？ 我认为是。

- squarecandy

Answer 5

以下是定义概述以及建议使用的摘要: 标签...用于突出文本以实现实用目的，没有传达任何额外的重要性，并且没有暗示替代的声音或语气，例如文档摘要中的关键字，评论中的产品名称，交互式文本驱动软件中的可操作词语，或文章开头。 标签...现在代表重要性而不是强调。 标签...用于突出文本中的替代声音或语气，或以指示不同质量的文本方式偏离正常散文，例如西方文本中的分类学名称，技术术语，来自其他语言的习惯语，思想或船名。 标签...表示重点。

（以下都是来自W3C来源的直接引用，我加了重点。请参见：https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements和http://www.w3.org/TR/html401/struct/text.html#h-9.2.1获取原始内容）

- Rick Westera

Answer 6

<i>和<b>标签比<em>和<strong>标签消耗更少的带宽。

如果不是自动生成的话，使用<i>和<b>标签需要更少的输入。 <em> 和 <strong> 标签会在编辑器屏幕上显示更多的文本。如果这些文件大小相同的话，那么程序员更喜欢较小的源文件。(而且实际上它们是相同的。是的，有一些“技术”差异(<i>咳嗽</i>, 呃，请原谅)，但这在很大程度上是虚假的。)

对于所有上述标签，如果您需要自定义它们的外观以使其与默认呈现不同，可以使用样式表进行自定义。

- Thomas Eding

---

哈哈，这应该是被接受的答案 (HHOS). 你的回答是整个页面上最朴实和正确的，即使它有点像个玩笑。关于“语义学”的整个事情本来就是一个愚蠢的游戏。我们都知道，任何查找此问题的人都是考虑到主要的浏览器供应商，如Chrome、Firefox、IE等。我们只想知道真正的、实际的差异可能是什么，而不是委员会在其充裕的空闲时间里辩论的内容。 - GDP2

Answer 7

和都与样式有关，而和则是语义化的。在HTML 4中，前者被归类为字体样式元素，后者被归类为短语元素。

正如您正确指出的，和经常被认为是相似的，因为浏览器通常都会将它们呈现为斜体。但根据规范，表示强调，表示更强烈的强调，这是非常清楚的，但经常被误解。另一方面，何时使用或的区别实际上是一个样式问题。

- Kariem

---

strong 不表示“更强的强调”，而是表示“重要性”。对于更强的强调，请在另一个em元素中嵌套一个em元素。 - chharvey

如果您跟随上面的短语元素链接，您会发现我只是引用了规范。我认为这并不与重要性的语义冲突，也不会出现两个em嵌套强调的情况，这是我理解您所建议的。@TestSubject528491 - Kariem

我认为HTML5规范只是更清楚地区分了这两个概念。在我看来，“emphasis”意味着语气的强调。例如，“你要买那条裤子吗？”与“你要买那条裤子吗？”因强调位置的不同而有不同的含义。然而，“importance”则不受位置影响。例如，“警告：狗会咬人！”即使移除了重要性，它的含义仍然相同。 - chharvey

<b>和<i>都与样式相关。但是，官方的HTML5文档表示不同。需要引用吗？ - user719662

@vaxquis 在上面提到了 HTML 4：<b> 和 <i> 是字体样式元素，而 <em> 和 <strong> 是短语元素。有什么建议可以改进吗？为了完整起见，也因为您的评论没有包含引用，HTML 5.2 中所有这些元素都在 phrasing content 中描述。 - Kariem

Answer 8

虽然使用 <b> 和 <i> 标签在语义上不如使用 <strong> 和 <em> 正确，但是对于用户编写的内容来说，使用前者也有明显的合理理由。

在这样的内容中，单词或短语可能会以粗体或斜体形式出现，而我们通常无法分析这种加粗或倾斜的语义推理。

此外，这样的内容可能会引用加粗和倾斜的单词和短语来传达特定的含义。

例如，英语考试题目要求学生替换加粗的单词。

- mwiik

---

“更语义化正确”？你是什么意思？你读过关于b/i标签的HTML5规范吗？ - user719662

Answer 9

b或i表示您希望文本以粗体或斜体呈现。 strong或em表示您希望文本以用户理解为“重要”的方式呈现。默认情况下，将strong呈现为粗体，将em呈现为斜体，但某些其他文化可能使用不同的映射。

与程序中的字符串一样，b和i是“硬编码”的，而strong和em则是“本地化”的。

- Stephan Leclercq

Answer 10

<i>、<b>、<em> 和 <strong> 标签在传统上是代表性的。但是在 HTML5 中，它们被赋予了新的语义含义。

在 HTML4 中，<i> 和 <b> 用于字体样式。其中，<i> 用于斜体，<b> 用于加粗。在 HTML5 中，<i> 标签具有新的语义含义，表示“替代的语气或心情”，而 <b> 标签则表示风格上的偏移。

<i> 标签的示例用途包括 - 分类学指定、技术术语、来自其他语言的习惯用语、音译、思想、西方文本中的船名等。例如 -

<p><i>I hope this works</i>, he thought.</p>

< p > <b> 标签的示例用途包括文档摘录中的关键词、评论中的产品名称、交互式文本驱动软件中的可操作单词和文章引导。

以下示例段落在样式上与其后面的段落有所区别。

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em> 和 <strong> 在 HTML4 中表示强调和强烈强调。但在 HTML5 中，<em> 表示语气上的强调，<strong> 表示重要性的强调。

在下面的例子中，在读取单词before时应该有一种语言上的变化...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

在同一个示例中，我们可以使用<strong>标签如下...

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

强调事件日期的重要性。

MDN参考：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/b

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/i

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/em

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong

- adnan2nd