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

<b>并且是显式的 - 它们分别指定粗体和斜体。<i>

<strong>并且是语义的 - 它们指定所包含的文本应该以某种方式“强烈”或“强调”，通常是粗体和斜体，但允许通过 CSS 控制实际样式。因此，这些在现代网页中是首选。<em>

<strong>并为您的文档添加额外的语义含义。碰巧的是，它们还为您的文本提供了粗体和斜体样式。<em>

你当然可以用CSS覆盖它们的样式。

<b>另一方面，仅应用字体样式，不应再使用。（因为你应该用CSS格式化，如果文本真的很重要，那么你可能会让它变得“强烈”或“强调”！<i>

希望这是有道理的。

<b>应该避免，因为它们描述了文本的风格。相反，请使用 and，因为这描述了文本的语义（含义）。<i><strong><em>

与HTML中的所有内容一样，您不应该考虑您希望它看起来如何，而应该考虑您的实际含义。当然，它对你来说可能只是粗体和斜体，但对屏幕阅读器来说不是。

“它们具有相同的效果。但是，XHTML（一个更简洁、较新的 HTML 版本）建议使用该标记。强更好，因为它更容易阅读——它的意思更清晰。此外，传达一个含义 - 强烈显示文本 - 而（粗体）传达一种方法 - 加粗文本。有了 strong，如果你使用 CSS 样式表来改变使文本变得强大的方法是什么，你的代码仍然有意义。<strong><strong><b>

和 “之间的区别也是如此。<i><em>

谷歌dixit：

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

b 或 i 表示您希望将文本呈现为粗体或斜体。strong 或 em 表示您希望以用户理解为“重要”的方式呈现文本。默认设置是将 strong 呈现为粗体，将 em 呈现为斜体，但其他一些区域性可能会使用不同的映射。

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

正如其他人所说<b>和<i>是明确的（即“使这段文字加粗”），而<strong>和<em>是语义的（即“这段文字应该被强调”）。

在现代网络浏览器的上下文中，很难看出差异（它们似乎都产生了相同的结果，对吧？），但想想视障人士的屏幕阅读器。如果屏幕阅读器遇到 <i> 标签，它将不知道该怎么做。但是，如果它遇到一个<em>标签，它就知道无论里面有什么，都应该向听众强调。从中你会得到实际的区别。

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

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

想想三种不同的情况：

• Web 浏览器
• 盲人
• 手机

“粗体”是一种风格——当你说“粗体一个词”时，人们基本上都知道 这意味着在字母周围添加更多，比如说“墨水”，直到它们脱颖而出 在其余的信件中更多。

不幸的是，这对盲人来说毫无意义。在手机上 和其他 PDA 一样，文本已经是粗体的，因为屏幕分辨率非常小。你不能在不搞砸东西的情况下加粗。

<b>是一种风格——我们知道“大胆”应该是什么样子。

然而，<强>表明应该如何理解某事。在浏览器中，“Strong”可能（并且经常）表示“粗体”，但它也可能意味着像 Jaws（针对盲人）这样的口语程序的较低音调，或者在 Palm Pilot 上用下划线表示（因为你不能加粗）。

HTML 从来都不是关于样式的。搜索“Tim Berners-Lee”和“the semantic web”。 是语义的——它描述它周围的文本（例如，“此文本应该比你显示的文本的其余部分更强”），而不是描述它周围的文本应该如何显示（例如，“此文本应该加粗”）。<strong>

<b>和 都与风格有关，而 和 是语义的。在 HTML 4 中，前者被归类为字体样式元素，后者被归类为短语元素。<i><em><strong>

正如您正确指出的那样，并且通常被认为是相似的，因为浏览器通常以斜体呈现两者。但根据规范，表示强调并表示更强的强调，这很清楚，但经常被误解。另一方面，何时使用或之间的区别实际上是一个风格问题。<i><em><em><strong><i><b>

您通常应尽量避免 和 .在创建 CSS 之前，它们在早期的 HMTL 版本中被引入用于布局页面（改变其外观），例如 while removed 标签，并且主要是为了向后兼容而保留的，因为一些论坛允许内联 HTML，这是一种更改文本外观的简单方法（例如 BBCode 使用 ， 您可以使用等）。<b><i>font[i]<i>

自从 CSS 创建以来，布局实际上不再是 HTML 中应该做的事情，这就是为什么首先创建了 CSS（HTML == 结构，CSS == 布局）。这些标签将来也可能会消失，毕竟如果你需要一个“无意义”的字体变体，你可以使用CSS和标签使文本加粗/斜体。HTML 5 仍然允许它们，但声明以这种方式标记文本没有意义。span

<em>另一方面，只说某事被“强调”或“强烈强调”，它让浏览器完全开放如何呈现它。默认情况下，大多数浏览器将按照标准建议的斜体和粗体呈现，但它们不会被迫这样做（它们可能使用不同的颜色、字体大小、字体等）。您可以使用 CSS 以您想要的方式更改行为。例如，如果您愿意，您可以加粗，也可以加粗和红色。<strong>emstrongemstrong

虽然 和当然在语义上更正确，但似乎有明确的合法理由将 and 标签用于客户编写的内容。<strong><em><b><i>

在此类内容中，单词或短语可能被加粗或斜体，我们通常无法分析这种加粗或斜体的语义推理。

此外，此类内容可以引用粗体和斜体的单词和短语来传达特定的含义。

一个例子是英语考试问题，它指示学生替换粗体字。

正如其他人所说，区别在于 和 硬编码字体样式，而 and 决定语义含义，字体样式（或朗读浏览器语调，或你有什么）将在文本呈现（或朗读）时确定。<b><i><strong><em>

如果您愿意，您可以将其视为“物理”字体样式和“逻辑”样式之间的区别。在以后的某个时候，您可能希望更改文本的显示方式和显示方式，例如，通过更改样式表中的属性来添加颜色和大小更改，甚至完全使用不同的字体。如果使用了“逻辑”标记而不是硬编码的“物理”标记，则只需在样式表中的一个位置更改显示属性，然后引用该样式表的所有页面都会自动更改，而无需编辑它们。<strong><em>

很光滑，对吧？

这也是为段落、表格单元格、标题文本、标题等定义子样式（使用文本标记中的属性引用）以及使用标记的基本原理。您可以在样式表中定义逻辑样式的物理表示形式，这些更改会自动反映在引用该样式表的网页中。想要不同的源代码表示形式吗？重新定义“代码”样式的字体、大小、粗细、间距等。style=<div>

如果使用 XHTML，甚至可以定义自己的语义标记，样式表将为您转换为物理字体样式和布局。

实际上，我同时使用 <strong> 和 <b>，正是出于此回复中提到的原因。有时，粗体对某些文本看起来更好，但它不一定比句子的其余部分更重要。这是我现在正在处理的一个页面的示例：

“检索<strong>all</strong>关于<b>棍网球</b>的书籍。”

在那句话中，“所有”这个词非常重要，而“棍网球”则不那么重要——我只是想要它加粗，因为它代表一个搜索词，所以我想要一些视觉上的分离。如果您使用屏幕阅读器查看页面，我真的认为它不需要特意强调“棍网球”这个词。

我倾向于认为大多数 Web 开发人员使用另一个，但两者都很好——<b>绝对不会像一些人声称的那样被弃用。对我来说，这只是视觉吸引力和意义之间的一条细线。

我们将标签用于具有高优先级的文本，例如产品名称、公司名称等 SEO 目的，而简单则使其加粗。<strong><b>

同样，我们使用 SEO 优先级高的文本，而使文本只是斜体。<em><i>

仅当使用CSS样式类由于任何原因不方便或不可能时才使用它们（如博客系统，只允许在帖子中使用某些标签，并最终嵌入样式）。另一个原因是支持非常古老的浏览器（一些移动设备？）或原始的搜索引擎（为或标记提供点，而不是分析CSS样式）。<b><strong>

如果可以定义 CSS 样式，请使用它们。

以下是定义摘要以及建议的用法：

<b>...出于功利目的而引起注意的文本范围，没有传达任何额外的重要性，也没有暗示其他声音或情绪，例如文档摘要中的关键词、评论中的产品名称、交互式文本驱动软件中的可操作单词或文章。

<strong>...现在代表着重要性，而不是强调。

<i>...以另一种声音或情绪表达的文本跨度，或以其他方式以表明不同文本质量的方式偏离正常散文，例如分类名称、技术术语、来自另一种语言的惯用短语、思想或西方文本中的船名。

<em>...表示强调。

（这些都是来自 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）

<em>并消耗比 和 更多的带宽。<strong><i><b>

它们还需要更多的键入（如果不是自动生成的）。

它们还会使编辑器屏幕中出现更多文本。我似乎记得程序员喜欢较小的源文件，如果它们是相同的。（让我们说实话，它们是一样的。是的，存在“技术”（<i>咳嗽</i>，咳咳，对不起）差异，但这主要是虚假的。

使用上述任何标记，您可以使用样式表来自定义它们的显示方式，如果您需要它们与它们的默认呈现不同。

<strong>并且是抽象的（这就是人们说它是语义的意思）。 并且是使某事“强大”或“强调”的具体方法<em><b><i>

类比：

既是 to ，也是 is to<strong><b><em><i>

如

“车辆”是“吉普车”

HTML 格式元素：

HTML 还定义了特殊元素，用于定义具有特殊含义的文本。 HTML 使用 <b> 和 <i> 等元素来格式化输出，例如粗体或斜体文本。

HTML 粗体和强格式：

HTML <b> 元素定义粗体文本，没有任何额外重要性。

<b>This text is bold</b>

HTML <strong> 元素定义了强文本，并添加了语义 “强”的重要性。

<strong>This text is strong</strong>

HTML 斜体和强调的格式：

HTML <i> 元素定义斜体文本，不带任何额外内容 重要性。

<i>This text is italic</i>

HTML <em> 元素定义强调的文本，并添加了语义 重要性。

<em>This text is emphasized</em>

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

<i>并用于 HTML4 中的字体样式。 用于斜体和粗体。在 HTML5 中，tag 具有“替代声音或情绪”的新语义含义，而 tag 具有风格偏移的含义。<b><i><b><i><b>

标签的示例用法是 - 分类名称、技术术语、另一种语言的惯用语、音译、思想、西方文本中的船名。如-<i>

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

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

以下示例段落在样式上与后面的段落不同。

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

<em>并在 HTML4 中具有强调和强烈强调的含义。但在 HTML5 中意味着强调，意味着强烈的重要性。<strong><em><strong>

在下面的例子中，在阅读单词之前时应该有语言变化......

<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/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

对于使用标记的文本粗体<b>

对于重要的文本，使用标签<strong>

对于使用标记的文本斜体样式<i>

对于使用标记的强调文本<em>

我将在这里冒险进行历史和实际的热点：

是的，根据规范，它在 HTML4 中具有语义意义，并且具有严格的表示意义。<strong><b>

是的，当 HTML5 出现时，引入了略有不同的新语义含义 和 。bi

是的，W3C 推荐 - 基本上 - TL，DR;不要使用 B 和 I。

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

但：

现实世界的互联网上有大量现有的 HTML，这些 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 海洋可以满足这种期望，我无法想象它会被贬值以支持，或者浏览器会开始默认以不同的方式显示它们。bstrong

就是这样。这是我对语义、历史和现实世界的热门看法。b/i 和 strong/em 是一样的吗？不。在现代文明崩溃之前，它们是否可能同时存在，并在几乎所有情况下都被视为相同？我想，是的。

在 HTML Lang 中，这两个标签的使用方式如下：

simple text this is test text normal text



simple text this is important textwith normal text

这两个 HTML 标签之间的主要区别在于，粗体使文本在视觉上看起来只是粗体，而强烈的象征意义也使各自的文本变得必不可少，并表明它是一个清晰的单词或文本部分。

这种差异是由于 HTML 代码区分了符号和物理视觉 html 标记。前者指的是相关领域的含义，而后者只是定义了浏览器中的光学显示。

<b>而且，没有实际的语义意义（就像@splattne指出的那样）在很久以前是正确的。在现代 HTML5 （） 中，它们确实有意义。请查看以下链接。<i><!DOCTYPE html>

语义意义（来自 MDN）

• <b>：引起对元素的注意

  • 摘要中的关键字
  • 产品名称。

<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>

• <i>：惯用文本元素
  • 替代声音或情绪
  • 分类名称（例如属和种“智人”）
  • 来自其他语言的惯用语（例如“et cetera”）
  • 技术术语

<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>

<b>与。<strong>

意识到两者都是HTML5中的有效语义元素可能会有所帮助，并且它们在大多数浏览器中都具有相同的默认样式（粗体）是巧合（尽管一些较旧的浏览器实际上在下划线）。每个元素都旨在在某些类型的场景中使用，如果要将文本加粗进行装饰，则应实际使用 CSS font-weight 属性。源<strong>

<i>与。<em>

该元素表示其内容的强调，而该元素表示与正常散文相脱的文本。源<em><i>

我的 2 美分

我个人更喜欢和.<b><i><strong><em>

它们更短，从开发人员的角度来看，它们的语义含义也很有意义。 我不知道今天的屏幕阅读器是否可以与他们一起使用。如果没有，我想他们最终会的。A18n 是一个困难的话题，我只是遵循文档的领导。MDN 说我可以使用它们，所以我就这样做了。

问：strong、b、bold、em、i的区别？

答：这些是内联属性。

强：用于在语义上显示粗体或突出显示文本。

粗体或 b：此粗体标记只是常规样式为粗体的偏移文本。

em：标签在语义上强调重要的词。<em>

i ：标记仅偏移常规斜体样式的文本。<i>

注意：您应该使用 <strong></strong> 和 <em></em> 标记它们有意义的名称，以说明内容类型。语义标签对SEO也很有帮助。

首先，如果要设置文本样式来表示设计决策，请不要使用其中任何一个。为此，您应该使用CSS。

🙅 ♂️ 别这样

<article>
  <h1>Illa videamus, quae a te de amicitia dicta sunt.</h1>
  <b>John Doe, 23 March 2023</b>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suam denique cuique naturam esse ad vivendum ducem. <mark>Venit ad extremum;</mark> <a href="http://loripsum.net/">Quo igitur, inquit, modo?</a> Certe, nisi voluptatem tanti aestimaretis. </p>

  <ul>
    <li>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur.</li>
    <li>Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens.</li>
    <li>Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam.</li>
  </ul>
</article>

B 不再代表粗体，I 不再代表斜体，U 不再代表下划线。不要将这些视为您的文字处理器按钮。首字母缩写是早期 Web 标准中遗留下来的。如今，它们的含义是：

• <b>：引起注意元素
• <i>：惯用文本元素
• <u>：未铰接的注释（下划线）元素

时髦的名字。他们必须以某种方式保留首字母缩写。

这些元素确实具有语义意义，尽管意义较弱，并且没有被弃用。它们用于简单地将一些文本与周围的文本区分开来。

回到示例：

👍 这是语义 HTML

cite {
  font-weight: bold;
  font-style: normal; /* we override the browser styling here, to make it look like the previous example */
}

<article>
  <h1>Illa videamus, quae a te de amicitia dicta sunt.</h1>
  <cite>John Doe, 23 March 2023</cite>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suam denique cuique naturam esse ad vivendum ducem. <mark>Venit ad extremum;</mark> <a href="http://loripsum.net/">Quo igitur, inquit, modo?</a> Certe, nisi voluptatem tanti aestimaretis. </p>

  <ul>
    <li>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur.</li>
    <li>Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens.</li>
    <li>Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam.</li>
  </ul>
</article>

它们产生相同的视觉效果，但它们的语义不同。将文章信息加粗是一项设计决策。（此外，该元素是另一个语义标签 - 它指示内容的来源）<cite>

此外，这些标签可以使用 CSS 设置样式 - 查看 MDN 中的示例以查看一些潜在的样式。

默认情况下，在大多数浏览器中，和标记会产生相同的视觉结果，但这只是一个巧合。<strong><b>

它们具有不同的语义含义。虽然 、 和 标签只是将文本分开，但 和 标签用于创建强调。这不仅代表了将某些文本分开，还将其标记为重要。对于屏幕阅读器，它通常也会改变音调。正如您可能想象的那样，该标签表示更强的强调程度。<b><i><u><strong><em><strong>

• <em>：强调元素
• <strong>：强重要性元素

是的，我完全看到在很多地方被设置为带下划线的样式，这是完全有效的语义 HTML。<strong>

最后，这里有一些例子来帮助你做出决定：

.note {
  background-color: #ffff0080;
}

<article>
  Humans (<i>Homo sapiens</i>) are the most widespread species of primate.<br>
  <i>Around the World in Eighty Days</i> was one of Jules Verne's most notable works.
  <div class="note">
    In these examples, I used the <code>&lt;i&gt;</code> tag to indicate text that should be simply set apart - you wouldn't intonate it when reading the above sentences aloud.
  </div>
</article>
<article>
  This is <em>urgent</em>. The deadline is in <em>one week</em>.<br>
  Linux Mint is <em>widely praised</em> for its user-friendly interface and stability.
  <div class="note">
    In these examples, I used the <code>&lt;em&gt;</code> tag instead, to indicate a text of particular importance.
  </div>
</article>

当然，这些例子也适用于 or 。<b><strong>