<strong>与font-weight:bold的区别，以及<em>与font-style:italic的区别

Question

在使用 CSS 属性时，是否真的存在使用 <strong> 和 <em> 标记之间的实际差异：

font-weight: bold;
font-style: italic;

另外，为什么两种选项都存在呢？我可能错了，但是<strong>和<em>是在font-weight和font-style成为标准CSS属性相当长一段时间之后才出现的吧？如果是这样的话，肯定有一些原因。

- Jake Wilson

---

将strong与font-weight: bold进行比较，就像将h1与display: block; font-size: 2em; font-weight: bold; margin: .67em 0;进行比较一样。 - zzzzBov

Answer 1

HTML代表意义；CSS代表外观。在文档中如何标记文本并不是由文本在屏幕上的外观决定的，而只是它所代表的意义。例如，其他一些HTML元素（如标题）默认情况下使用font-weight: bold进行样式设置，但它们使用的标记是<h1> - <h6>，而不是<strong>或<b>。

在HTML5中，您使用<strong>来指示句子中的重要部分，例如：

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.

使用<em>来表示语音重音，例如：

<p>A Gentleman: I suppose he does. But there's no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.

这些元素是语义元素，只是默认情况下具有粗体和斜体表示，但您可以根据自己的喜好进行样式设置。例如，在上面的<em>示例中（来自BioShock Infinite的开场对话），您可以将强调大写而不是斜体，但<em>元素的功能目的仍然相同-通过强调特定单词或短语来改变句子的上下文。

em {
    font-style: normal;
    text-transform: uppercase;
}

em {
    font-style: normal;
    text-transform: uppercase;
}

p {
    line-height: 1.5;
    margin: 0;
}

<p>A Gentleman: I suppose he does. But there's no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.

请注意，以下来自2011年的原始答案适用于HTML5之前的HTML标准，在这些标准中，<strong>和<em>有着不同的含义，而<b>和<i>则完全是表现性的，没有任何语义意义。与<strong>和<em>类似，它们具有类似的默认表现形式，但可以以不同的样式呈现。

---

你可以使用<strong>和<em>分别表示强调和普通强调。

或者这样理解：font-weight:bold更接近于<b>而不是<strong>，font-style:italic更接近于<i>而不是<em>。这些视觉样式仅仅是视觉上的，像屏幕阅读器这样的工具并不会理解粗体和斜体的含义，但是一些屏幕阅读器能够以更强调的语气读取<strong>和<em>文本。

- BoltClock

---

这不仅仅是理论上的问题，事实上，在网页设计中，使用下划线、文字颜色和背景颜色来替换默认样式并不罕见。 - Chuck

Answer 2

<em> 元素 - 来自 W3C (HTML5 参考文献)

是的! 这里有一个明显的区别。

<em> 元素表示其内容的强调重点。特定内容的强调级别由其祖先<em>元素的数量确定。

<strong>  =  important content
<em>      =  stress emphasis of its contents

强调的位置会改变句子的意思。因此，该元素构成了内容的一个组成部分。强调的具体方式因语言而异。

注意！

1. <em> 元素也不适合传达重要性；为此，<strong> 元素更合适。

2. <em> 元素并不是通用的“斜体”元素。有时，文本旨在突出显示，就像它处于不同的情绪或语气中一样。对于这种情况，i元素更合适。

参考文献（示例）：请参阅W3C参考资料

- Alex

---

<strong>和<em>是语义标记。与其仅使用<b>或<i>，你正在给出一个“原因”，为什么它被标记不同——比<b>或<i>更多关于文本的信息。这对于屏幕阅读器非常重要，因为简单的<i>可能意味着强调、外来词、引用标题等。<em>通常在视觉上等同于<i>（<strong>等同于<b>），但这并不保证，并且可以在CSS中更改。 - Phil Perry

Answer 3

问题在于语义意义（正如BoltClock所提到的）和视觉呈现方面。

最初，HTML使用<b>和<i>这些完全基于样式的命令，放置在文档标记的语义环境中。CSS旨在尽可能地分离出媒体的样式元素。因此，诸如粗体和斜体之类的样式信息应该放在CSS中。 <strong>和<em>被引入以满足将文本标记为更重要或更强调的语义需求。它们具有类似于bold和italic的默认样式解释，但并不局限于此。

- Orbling

Answer 4

和 - 与和不同 - 对于盲人使用的网络浏览器有明确的目的。 盲人不会通过视觉浏览网页，而是通过文本阅读器等声音进行。除了鼓励某些内容加粗或斜体外，和还分别传达响亮或强调音节（OH MY！和Ooooooh Myyyyyyy！）。对于仅限音频的浏览器，和是不可预测的...它们可能使它们变得响亮或强调它们，也可能不会...除非您使用和。

- lilHar