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 这两篇文章中,做了很好的总结:
em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em. 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 标准中做了详尽解释:
The em element represents stress emphasis of its contents.
The placement of emphasis changes the meaning of the sentence.——em
elementThe strong element represents strong importance, seriousness, or urgency for its contents.
Importance: The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. (This is distinct from marking up subheadings, for which the hgroup element is appropriate.)
For example, the first word of the previous paragraph is marked up with strong to distinguish it from the more detailed text in the rest of the paragraph.
Seriousness: The strong element can be used to mark up a warning or caution notice.
Urgency: The strong element can be used to denote contents that the
user needs to see sooner than other parts of the document.The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.——strong element
em 表示内容的重点(stress emphasis),strong 表示强烈的重要性、严重性或内容的紧迫性,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>
强调可爱,讨论的是猫是否可爱。
<h1>Chapter 1: <strong>The Praxis</strong></h1>
"chapter 1"仅仅是个引用,后面strong里的内容才是章节真正的名字。
<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are affected by the heat source (upper left) and the food source (lower right).</figcaption>
<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>
这里strong的使用是为了和其他内容区分开来。
In this example, the strong element is used to denote the part of the text that the user is intended to read first.
在这个例子里,strong标签是用来指示用户优先查看的部分内容。
<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
<li><p><strong>Turn off the oven.</strong></p></li>
<li><p>Put out the trash.</p></li>
<li><p>Do the laundry.</p></li>
</ul>