为什么 HTML 同时有 <b/i> 和 <strong/em>？

TLDR；

• 和标签源自 HTML 的过去，注重外观b。i
• 和标签代表HTML的现在和未来，注重含义strong。em

作为一名 Web 开发者，你可能注意到了一些令人费解的事情。似乎有两组标签的功能非常相似：
1b标签使文本变为粗体，而i标签使文本变为斜体。2
标签strong也使文本变为粗体，而em标签使文本变为斜体。

那么，HTML 为什么要同时使用这两种语言呢？它们的作用难道不一样吗？嗯，不完全一样。让我们来揭开这些看似冗余的组合背后的故事。

简短的历史课

要理解为什么我们需要这两组标签，我们需要快速回顾一下过去。HTML 在 20 世纪 90 年代初首次创建时，就包含了b和i标签。这些标签的作用很简单：b使文本加粗，使i文本变为斜体。很简单，对吧？

但随着网络的发展，开发人员和设计师意识到了一件重要的事情：HTML 不应该仅仅关注事物的外观，还应该关注事物的含义。

输入语义 HTML

这种认识催生了“语义 HTML”的概念。“语义”一词指的是某种事物的含义。在 HTML 中，它意味着使用标签来描述内容，而不仅仅是描述其外观。

这就是strong和 的em用武之地。引入这些标签是为了赋予文本意义，而不仅仅是改变其外观：

• strong表示该文本很重要或紧急。
• em（强调的缩写）表明阅读时应强调文本。

因此，最大的区别在于：

• b并且i与外观有关。它们告诉浏览器“将这段文字加粗”或“将这段文字加斜体”。
• strong并且em与含义有关。它们告诉浏览器，“这段文字很重要”或“这段文字应该被强调”。

为什么这很重要

你可能会想：“好吧，但它们在页面上看起来还是一样。我为什么要关心它？”
嗯，我认为这种区别很重要，主要有两个原因：

• 可访问性：屏幕阅读器（为视障用户大声朗读网页的软件）可以解读strong和em标签，以便在阅读文本时添加正确的语气或强调。他们可能会跳过b和i标签。
• 搜索引擎：一些搜索引擎可能会给予标签内的文本更大的权重strong，认为它更重要。

何时使用哪个？

让我们看一个例子来更清楚地说明这一点：

The zoo's new panda, named Mei Lan, will make her
<strong>public debut next Tuesday, July 16</strong>. 
Visitors are advised to arrive <em>early</em> as large 
crowds are expected. 

<b>Note:</b> Her favorite food is <i>bambusa vulgaris</i>,
a type of bamboo.

在此示例中：

• strong用于有关出道日期的重要信息。
• em强调游客应提前到达。
• b用于表示视觉上独特但不一定更重要的注释。
• i用于表示竹子种类的学名。

底线

尽管b/i和strong/em在网页上看起来可能相同，但它们的用途不同。

• 和标签源自 HTML 的过去，注重外观b。i
• 和标签代表HTML的现在和未来，注重含义strong。em

一般来说，最好在 HTML 中使用strong和em。它们能够提供更多关于内容含义的信息，并能提升可访问性和搜索引擎优化。

然而，对于纯粹的视觉样式，或者在您不想暗示额外重要性或强调的特定情况下，它们仍然有其适用之处。也就是说，对于简单的视觉样式，您可以使用b带有CSS 类的元素，因为它提供了更大的灵活性，并且在内容和呈现之间保持了更清晰的分离。ispan

好的 HTML 不只是让页面看起来正确 — — 也让它们的含义正确 ;)