CSS：em 和 strong 的区别

2016-07-05 08:45:00

表现

em vs strong

在浏览器中，默认用斜体表示，** 用粗体表示。从样式表现上，更加突出，更容易吸引眼光。显然，这种视觉上的差异设计是有目的的。

程度

EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.

在 HTML 4.01 的说明中，em 表示强调，strong 表示更强烈的强调。从两者视觉样式上的特点来说，这种“程度上”的解释确实有道理。

但把二者放在一大段落、一遍文章中时，读者第一眼肯定注意到的是粗体的 strong，而很难第一时间找到斜体不加粗的 em，因此往往是当读者读到某一处时，才会发现这种强调，与 strong 的这种不看内容但立刻就凸显出关键词句的强调相比，em 更偏向于用来局部强调，而strong 则是全局强调。

因此，光从二者强调程度上的强弱已经不足以说明其区别。

语意

在 HTML 5 中，进一步规定了两者的区别：

The em element represents stress emphasis of its contents.
The strong element represents strong importance, seriousness, or urgency for its contents.

MDN 中也将两者进行了对比，Emphasis vs. Strong：

While in HTML4, Strong simply indicated a stronger emphasis, in HTML5, the element is described as representing "strong importance for its contents." This is an important distinction to make. While Emphasis is used to change the meaning of a sentence ("I love carrots" vs. "I love carrots"), Strong is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.") Both Strong and Emphasis can be nested to increase the relative degree of importance or stress emphasis, respectively.

em 和 strong 已经不可以再用 HTML4 中从强调的程度来简单区分差别了。

em 表示内容的着重点（stress emphasis），放置的位置会改变所在句子的含义。
strong 表示内容的重要性（strong importance），强调句子的重要性而不会改变所在句子的语意。

例子

注：下面的例子中，斜体为 em，粗体为 strong。

Cats are cute animals.
强调猫，讨论的是哪种动物聪明可爱。

Cats are cute animals.
强调是，讨论的是猫是不是可爱。

Cats are cute animals.
强调可爱，讨论的是猫究竟是可爱还是不可爱。

"Warning! This is very dangerous***.
strong 表示的是重要性上的强调，不会引起句子意思的变化。

Warning. This dungeon is dangerous.
Avoid the ducks. Take any gold you find.
Do not take any of the diamonds,
they are explosive and will destroy anything within
ten meters. You have been warned.

注：em 和 strong 均可嵌套来增强其程度。