<em>:强调元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <em> 元素将文本标记为强调(emphasis)格式。<em> 元素可以嵌套,嵌套层次越深,则强调的程度越深。

尝试一下

属性

此元素只包括全局属性

使用说明

通常地,该元素会被浏览器展示为斜体文本,但是,它不应该仅仅用于应用斜体样式;为此目的,请使用 CSS font-style 样式。使用 <cite> 元素标记作品的标题(书籍、戏剧、歌曲等);它通常也采用斜体样式,但具有不同的含义。使用 <strong> 元素标记比周围文本更重要的文本。

<i> vs. <em>

新的开发人员看到多个元素产生相似的效果,经常被混淆。<em><i> 就是一对常见的例子,因为它们都对文字斜体化。它们的区别是什么?应该使用哪一个?

在默认情况下,它们的视觉效果是一样的。但语义是不同的。 <em> 标签表示其内容的着重强调,而 <i> 标签表示从正常散文中区分出的文本,例如外来词,虚构人物的思想,或者当文本指的是一个词语的定义,而不是其语义含义。(作品的标题,例如书籍或电影的名字,应该使用 <cite>。)

这意味着,正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的,那是 CSS 样式所做的。

一个 <em> 的例子可能是:"Just do it already!",或:"We had to do something about it"。人或软件在阅读文本时,会对斜体字的发音使用重读强调。

一个 <i> 的例子可能是:"The Queen Mary sailed last night"。在这里,没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明,谈论的对象不是一个名叫玛丽的女王,而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是:"The word the is an article"。

示例

在此示例中,<em> 元素用于突出显示两个成分列表之间的隐式或显式的对比。

html
<p>
  冰淇淋是用牛奶、甜味剂和奶油制成的。而冷冻蛋奶冻则由牛奶、奶油、甜味剂和<em>蛋黄</em>制成。
</p>

结果

技术概要

内容类别 流式内容短语内容和可感知内容。
允许的内容 短语内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
隐式 ARIA 角色 emphasis
允许的 ARIA 角色 任何角色
DOM 接口 HTMLElement。Firefox 在直至但不包含 Gecko 1.9.2(Firefox 4)的版本中为这个元素实现了 HTMLSpanElement 接口。

规范

Specification
HTML Standard
# the-em-element

浏览器兼容性

BCD tables only load in the browser

参见