小编典典

CSS/HTML:使文本斜体的正确方法是什么?

all

使文本斜体的 正确方法是什么? 我见过以下四种方法:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

这是“老办法”。<i>没有语义意义,只传达使文本斜体的表现效果。据我所知,这显然是错误的,因为这是非语义的。


<em>

这将语义标记用于纯粹的表示目的。碰巧<em>默认情况下以斜体呈现文本,因此那些知道<i>应该避免但不知道其语义含义的人经常使用它。并非所有斜体文本都是斜体,因为它被强调了。有时,它可能正好相反,比如旁注或耳语。


<span class="italic">

这使用 CSS 类来放置演示文稿。这通常被吹捧为正确的方法,但同样,这对我来说似乎是错误的。这似乎不再传达<i>.
但是,它的支持者哭了,如果你想要它加粗,那么以后更改所有斜体文本要容易得多。然而事实并非如此,因为我会留下一个名为“italic”的类,它会将文本呈现为粗体。此外,尚不清楚我为什么要更改我网站上的所有斜体文本,或者至少我们可以想到不希望或不需要这样做的情况。


<span class="footnote">

这将 CSS 类用于语义。到目前为止,这似乎是最好的方法,但实际上有两个问题。

  1. 并非所有文本都有足够的含义来保证语义标记。例如,页面底部的斜体文本真的是脚注吗?还是旁白?或者完全是别的东西。也许它没有特殊含义,只需要以斜体呈现,以便在表现上将其与前面的文本分开。

  2. 语义意义在强度不足时会发生变化。可以说,我仅根据页面底部的文本就同意了“脚注”。几个月后我想在底部添加更多文本时会发生什么?它不再是脚注。我们如何才能选择一个不那么通用<em>但又能避免这些问题的语义类呢?


概括

在许多情况下,语义的要求似乎过于繁重,因为将某些东西变成斜体的愿望并不意味着带有语义意义。

此外,将样式与结构分开的愿望导致 CSS
被吹捧为<i>在某些情况下实际上用处不大的情况下的替代品。所以这让我回到了不起眼的<i>标签,想知道这个思路是否是它留在 HTML5 规范中的原因?

还有关于这个主题的好的博客文章或文章吗?也许是那些参与决定保留/创建<i>标签的人?


阅读 90

收藏
2022-06-24

共1个答案

小编典典

您应该针对不同的用例使用不同的方法:

  1. 如果要强调短语,请使用<em>.
  2. 该标签在 HTML5<i>中具有新的含义,表示“一段文本以不同的声音或情绪”。因此,您应该将此标签用于诸如想法/旁白或惯用短语之类的内容。该规范还建议了船名(但不再建议书/歌曲/电影名称;改为使用)。<cite>
  3. 如果斜体文本是较大上下文的一部分,例如介绍性段落,则应将 CSS 样式附加到较大的元素,即p.intro { font-style: italic; }
2022-06-24