资讯专栏INFORMATION COLUMN

CSS:em 和 strong 的区别

zhou_you / 2321人阅读

摘要:程度在的说明中,表示强调,表示更强烈的强调。因此,光从二者强调程度上的强弱已经不足以说明其区别。语意在中,进一步规定了两者的区别中也将两者进行了对比,和已经不可以再用中从强调的程度来简单区分差别了。参考蓝色理想和的区别

表现

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 均可嵌套来增强其程度。

参考

W3C: Text

HTML Living Standard: The strong element

MDN:

stackoverflow: vs ?

蓝色理想:em 和 strong 的区别

Emphasis in context versus overall highlighting

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111339.html

相关文章

  • HTML语义化标签探析

    摘要:具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为,作用是定义列表中的项目。强调标签说明在上面的介绍中,已经介绍了和,个中差别,看英文既能分辨。 什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别。 为什么要语义化 有利于SEO:搜...

    DandJ 评论0 收藏0
  • HTML语义化

    摘要:近来看面试题的时候,经常看到一个问题语义化是什么意思里面有标签的含义。因为二者表示的含义不同。参考资料理解语义化语义化的革新语义化标签语义化标签探析 近来看面试题的时候,经常看到一个问题:HTML语义化是什么意思?w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改,由于不了解H5的新定义,就很容易弄错标签之间的意思。例如:既然i标签是指斜体的意思,那么为什么...

    Mike617 评论0 收藏0
  • emstrong区别

    摘要:和的区别,可以从三个层次上来谈。首先看中的说明表示强调,表示更强烈的强调。言简意赅,表明了和的命名来历。并且在浏览器中,默认用斜体表示,用粗体表示。强调事实,讨论的是猫是可爱的动物的事实。这里的使用是为了和其他内容区分开来。 em 和 strong 的区别,可以从三个层次上来谈。 首先看 HTML 4.01 中的说明: EM: Indicates emphasis. STRONG:...

    GeekQiaQia 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<