CSS:em 和 strong 的区别

表现

em vs strong html

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

程度

EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.

HTML 4.01 的说明 中,em 表示强调,strong 表示更强烈的强调。从二者视觉样式上的特色来讲,这种“程度上”的解释确实有道理。浏览器

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

所以,光从两者强调程度上的强弱已经不足以说明其区别。idea

语意

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. Strongcode

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 中从强调的程度来简单区分差异了。htm

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

例子

注:下面的例子中,斜体为 em,粗体为 strong。ip

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

Cats are cute animals.
强调是,讨论的是猫是否是可爱。

Cats are cute animals.
强调可爱,讨论的是猫到底是可爱仍是不可爱。

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

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

注:em 和 strong 都可嵌套来加强其程度。

参考

相关文章
相关标签/搜索