语义研究:em和strong的区别
em 和 strong 的区别,可以从三个层次上来谈。
首先看 HTML 4.01 中的说明:
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。
第二个层次上,在 Emphasis in context versus overall highlighting 和 em vs. strong 这两篇文章中,做了很好的总结:
1. em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.
2. strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.
em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认样式。
感觉上面已经解释得很清楚了?我们再来看看第三个层次上的区别。HTML5 草案中做了详尽解释:
1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
2. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。并且举了一个非常好的例子:
<p><em>Cats</em> are cute animals.</p>
强调猫,讨论的是哪种动物聪明可爱。
<p>Cats <em>are</em> cute animals.</p>
强调是,讨论的是猫是不是聪明可爱。
<p>Cats are <em>cute</em> animals.</p>
强调聪明可爱,讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。
<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>
strong 表示的是重要性上的强调,不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重,比如可以用两个 strong 来表示内容很重要。
可以看出,第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处,在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候,仔细阅读 HTML5 草案。有很多元素的语义,都阐释得非常清楚,对于我们如何在最恰当的地方使用最恰当的标签,非常具有价值。
最后,在 前端与民工 一文的回复中,以及收到的邮件里,很遗憾的没有发现有谁知道第三个层次上的区别。因此准备的礼品(我还真准备了10份),很落寞的发不出去了。不过这篇文章仅是个引子,接下来准备用一系列文章来探讨HTML中元素的语义。礼品的承诺继续有效,留给下一个话题:
请阐述dl的语义,并列举至少5种使用场景。
可以查阅资料,将结果贴在回复里,或邮件发送给我都可以,礼物有限,前10个答对的必送。
补充:和一些朋友又讨论了下,最后我的看法是:
- em 是句意强调,加与不加会引起语义变化。
- strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。

December 20th, 2008 on 23:28
实际应用复杂得多,贴个今天的聊天记录:
小马(23:06:51):
根据文章,是否价格更应该是<em>?
玉伯(23:08:46):
看怎么定位价格,比如detail页面,用strong好
玉伯(23:09:13):
一排商品的情况,用em和strong都说得过去
云烈(23:10:35):
明城,你还在公司?
玉伯(23:10:44):
需要看具体页面的设计,想突出什么。考虑的范畴太广,很难拿捏/:’”"
小马(23:10:55):
我依然觉得<em>是最合适的
明城(23:11:10):
/:817 早回家啦
小马(23:11:42):
但同意详情页面,可以用<strong>
玉伯(23:14:16):
对于关心价格,根据价格来决定买不买的浏览者来说,用strong,使得价格直接蹦到他们的眼前,这是很不错的
对于不怎么关心价格,更关心商品本身,根据质量来决定买不买的用户来说,用em,句意强调,很合适
玉伯(23:14:58):
问题是,淘宝的大部分用户,看中的究竟是 淘宝的商品的价格 还是 商品本身?
小马(23:15:11):
我特指宝贝列表的情形, 用<em> 是合适的,因为用户首先移动注意的是图片
玉伯(23:15:17):
目前感觉是 淘宝的低价 吸引了用户
玉伯(23:15:34):
因此 strong 来标注价格我感觉是合适的
小马(23:15:42):
价格是用户在被图片吸引后,才会注意的属性
玉伯(23:16:30):
不能拿 图片 和 文字 来比
这是视觉上的差异,不说明重要性
玉伯(23:17:32):
比如一篇技术文章,有文字,有插画, 我们首先看的是插画,但实际上文字更重要
小马(23:17:46):
局部强调和全局强调的关系, 很明显在“列表页面”价格是局部强调
小马(23:18:03):
整个页面中某些关键字是全局强调
玉伯(23:19:18):
局部强调和全局强调的说法并不准确,请仔细体会第三层次上的差异
小马(23:19:30):
如果一定要强调价格, 那么“淘宝价”这三个字和价格数字就应该都包在<strong>里,而不只是数字
小马(23:20:21):
所以很明显,价格是局部语义,不是全局语义
小马(23:22:23):
不去争论了,既然已经确定,那么就先用,以后根据发展再去调整
玉伯(23:22:25):
玉伯(23:14:16):
对于关心价格,根据价格来决定买不买的浏览者来说,用strong,使得价格直接蹦到他们的眼前,这是很不错的
对于不怎么关心价格,更关心商品本身,根据质量来决定买不买的用户来说,用em,句意强调,很合适
玉伯(23:22:50):
我说得很清楚了
小马(23:23:24):
你抬高tag的意义了
玉伯(23:23:49):
睡觉,语义系列希望大家积极参与/:^_^
小马(23:24:46):
明天还要加班,大家早点睡吧
December 20th, 2008 on 23:56
很好,以前真的很少注意到他们的区别,也基本上不用em,这样看来以后em的用途大大扩展了。
December 21st, 2008 on 1:22
哦,小小东西区别这么大
December 21st, 2008 on 11:25
上篇博客提到知道em和strong区别的联系你有礼物的,四六级考试去了还没来得及说,哈哈。
我觉得总的来说em应该注重“指示”,而strong表示“强调”,而你的这篇博客几个方面说的都是这个范围的区别举例,很好,从具体的例子学习了。
December 21st, 2008 on 11:29
最大的区别还是从语义的角度来谈的,通常我情况下我比较喜欢在正文中使用em加强语气,或者强调。
从SEO的角度来说,strong的强调效果更明显一些,特别是在内容和标题一致的关键词上。
December 21st, 2008 on 11:51
dl我以前一直没有用好,期待下期的解答
有一次做东西,将应该用dl的地方用了ul,然后本应该用dt的地方用em标记了,汗个~
现在的浅薄的理解是dl是用在一类具有不同“名称”属性的集合,极具数据的结构性(类似一个特殊的xml子集
),当文档流具有这种结构特性时我会用到dl。如具有明显名称特性的无序列表,相同类数据的整理(如淘宝首页的拼音索引)等。
我的理解太浅薄了,期待下期射雕的解答。
December 21st, 2008 on 12:28
一直订阅射雕同学的博客,发现每次分析的都很有意思,重要的是今天竟然还看到最后还发现有礼品,哈哈~~ 那就顺便讨论一下DL吧。
我理解这个标签就是define list的意思,就是定义一个列表,就好像C语言里面的结构体struct。结构上也有点像二维表格。主要看怎么应用。
通常在符合语义的情况下定义格式是
<dl>
<dt></dt>
<dd></dd>
</dl>
在一条dt的顶一下dd可以多组,例举五个应用案例(我其中使用过的只有3个,另外两个不常用):
注:为了简单方便说明,一下内容省略那个尖括号。
1.货物详情
dl
dt 名称
dd 核导弹
dt 产地
dd 美国
dd 中国
dt 用途
dd 战争
dl
2.在第一个列表的基础上稍微负责的变种,就是一组里面包含两个元数据(语义化的内容来源W3C)
dl
dt 旺旺最后一次登陆时间
dd 1999年12月31日23点59分
dt 好评
dt 坏评
dd 100%
dd 99%
dl
3.应用于一些调查或者选择列表上
h3 QQ等级
dl
dt 如果你在线时间满100小时
dd 那你才获得一个星星
dt 如果你在线时间累计3个星星
dd 恭喜你获得一个月亮
dt 如果你在线时间累计四个月亮
dd 狠人!你终于获得一个太阳了
dl
在进行下面两个之前解释一下标记,这个标记主要的作用就是定义一个术语,更复杂的留给射雕兄慢慢研究吧。
弄个狠点的术语列表,专业术语部分要使用dfn来标记。
dl
dt dfn 三聚氰胺
dd 一种经常被添加到食品中的毒品,近几年来起源于中国。
dt dfn 河蟹
dd 原指一种甲壳纲动物也叫“螃蟹”,为了防止被XXX屏蔽现今通常指代GFW
dt dfn 雷人
dd 自己GOOGLE去吧,我不在这里雷人了。
dl
最后这个除了增加dfn以外,另外多了一个lang的dt声明,用途是在不同的语言环境下的术语定义dd相同的解释。比如英语中的”book”,汉语中的”书”.。其实就是一个意思。
dt的一个变种(来源BenMeadowcroft,解释的比W3C好多了。)
dl
dt lang=”gb2312″ dfn 毛主席
dt lang=”big5″ dfn 毛澤東
dd 中国伟大的领袖
dl
参考资料:
1. http://www.benmeadowcroft.com/webdev/articles/definition-lists.shtml
2. http://www.w3.org/TR/html5/
December 24th, 2008 on 9:27
也写过关于em的,但是没有射雕来的深刻,学习。。。
December 24th, 2008 on 10:18
这种情况下不知道合适不合适:
dl
dt
dd
dt
dd
dt
dd
突然发现我对dl的理解有很大的误区
December 24th, 2008 on 11:30
受益匪浅
December 24th, 2008 on 12:34
在BI是看到了关于DL的讨论,来这里交作业
1、 dl,dt,dd分别是definition list、definition term、definition description的缩写
2、 我所见过的应用场景(dl省略)
a、词典 blog博客,由web log衍生出的互联网词汇
b、定义、说明 CET 4写作培训班名师指导,XXXXXXXX
c、FAQ列表 在这里回复收费吗?不收钱,不然博就主发大财了。
d、对话 使用dt标注说话人的身份使用dd表示对话的内容
e、表单 表单项的说明文本框、radio、checkbox上阵
就先写这5个吧,dl是个边缘元素,使用率比ul、ol低很多,所出现的场景也未必能很好的诠释其本身的语义咯
December 24th, 2008 on 18:59
回复个帖子,可真累呀,得分三次,这个版本有就乱,要看好一点的就到蓝色理想去看 http://www.blueidea.com/tech/web/2008/6342.asp
楼主一定要给我礼物哦,好期待呀,
December 24th, 2008 on 22:44
晕“`标签被过滤了 再来一下
dl
dt img
dd a
dt img
dd a
dt img
dd a
December 25th, 2008 on 14:08
才发现我写的标签也都被过滤了…
a、词典 dt – blog博客, dd – 由web log衍生出的互联网词汇
b、定义、说明 dt – CET 4写作培训班 dd – 名师指导,XXXXXXXX
c、FAQ列表 dt – 在这里回复收费吗? dd – 不收钱,不然博就主发大财了。
d、对话 dt – 说话人的身份 dd – 对话的内容
e、表单 dt – 表单项的说明 dd – 文本框、radio、checkbox
January 7th, 2009 on 14:55
个人认为,em,strong的原始意义为在某个句子,段落或者整篇文章中强调某个单词或某个句子的重要性,按照西方的习惯和大部分字体设计,font-style为normal,italic,bold.分别正常字体,斜体和粗体,是递进性的语气.
,自己把理由画圆了,可能自己对语义理解的不够深.
那么建立在上面的理解基础之上,那么讨论em,strong的使用上的区别并没有太多的意义,因为限定了使用的环境为句子,段落和整篇文章.
其实大部分情况下,使用em,strong也只是为了减少class的使用,如果使用在页面单纯的只是为了高亮(highlight)之用,em不再是斜体,而strong也不再是粗体,既然这样,外观(appearance)就是样式表所控制的,em,strong和span的使用也再无任何语义上的区别.
另外,斜体在中文排版中是不适用的.
多说一些,dl,dt,dd,作为定义列表和其他标签的区别:
1.用作解释和诠释.也就是说dt和dd是语义上等级层次之分,dt中的文本从结构上不能够直接包含dd中的文本.借用w3schools的例子,对咖啡的解释就是如此.
黑色的表示颜色,热,饮料表示温度和状态,但黑色的饮料不一定就是咖啡.
2.dt是专业术语或者比较笼统,需要拆分解释的.例如adobe的adobe cs4产品页面中用到的定义列表用于解释新功能.
例如对Fireworks4的新功能概括为 “使用 Adobe Fireworks CS4 制作 Web 原型和编辑图像”.那么有必要进行拆分解释.链接如下:
http://www.adobe.com/cn/products/creativesuite/mastercollection/features/
3.dl是列表,也就是集合性质的.所以多个定义存在的情况下才有必要使用,如果只有臆想,是否可以考虑使用如下结构:
div-title-description,也就是div-h2,h3,h4-p,ul,div…
4.如果dt和dd如果直接存在意义上的包含,可以考虑使用div-title-description结构,也就是div-h2,h3,h4-p,ul,div…
5.淘宝的商品信息描述,如果单纯考虑到页面结构,页面可以用到定义列表,拆分为主的,而非完全解释性的.
对一件商品进行描述.如一件衣服:
一件衣服:
销售信息可以分为:–价格,运费,剩余时间…
,毕竟只是个假设,可以看到现在商品信息页的结构并没有这么简单.
产品信息可以分为:–尺码,大小,颜色…
纯属个人意见,可能期间偷换概念自己都以为自己说圆了.
January 9th, 2009 on 17:27
用的了搞那么复杂吗?
普通用户会查看源代码?
还是你老板突然一天会跑过来问你em和strong有什么区别?
实在搞不明白有多少意义
January 11th, 2009 on 14:28
DL标签的语义 http://blog.cloverdesign.cn/archives/265 我简单总结了下:)
January 11th, 2009 on 19:43
用户看不看是用户的事,自己就求个心安理得。
又学到东西了,估计要在这里泡几天了。
January 19th, 2009 on 8:46
无论什么标签,都是从英文中来的,基于英文的语义,应该从英文的角度去阐述,而不应该从中文中去解析。
April 7th, 2009 on 13:17
尖括号被滤掉了,换成全角的
<strong> = <b>
<strong> = <i>
August 28th, 2009 on 19:17
dl
dt 相当于名称
dd 相当于对名称的解释等
这种用的地方很多,比如adobe的导航,logo用dt,菜单用dd
比如列出省市,省可以用dt 市可以用dd
比如某一模块 新闻标题可以用dt 新闻下的列表用dd ul
用的地方很多,可以上面排列,可以左右排列,也可以一个dt,很多dd
leave a reply