一尘不染

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

css

什么是使文本变为斜体的 正确 方法?我已经看到以下四种方法:

<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>。但是,它的支持者大声疾呼,如果您说要大胆的话,以后更改所有斜体文本会容易得多。事实并非如此,因为那时我将剩下一个称为“斜体”的类,该类使文本变为粗体。此外,目前尚不清楚为什么我要更改我网站上的所有斜体文本,或者至少我们可以想到这种情况是不希望或没有必要的。


<span class="footnote">

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

  1. 并非所有文本都有足够的含义来保证语义标记。例如,页面底部的斜体文本真的是脚注吗?还是放在一边?或完全其他的东西。也许它没有特殊的含义,只需要用斜体将其表示形式与前面的文本分开即可。

  2. 如果没有足够的强度,语义可能会发生变化。可以说,我跟着“脚注”是基于页面底部的文字。当几个月后我想在底部添加更多文本时会发生什么?它不再是脚注。我们如何选择一个语义类,该语义类的通用性要小于<em>但要避免这些问题?


摘要

似乎在许多情况下,对语义的要求似乎过于繁琐,在这些情况下,使斜体字的愿望并不意味着带有语义。

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

是否有关于此主题的好的博客文章或文章?可能是由那些决定保留/创建<i>标签的人员参与的?


阅读 1095

收藏
2020-05-16

共1个答案

一尘不染

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

  1. 如果要强调短语,请使用<em>
  2. <i>标签具有在HTML5新的含义,代表“一个在可替代的语音或文本心情跨度”。因此,您应该将此标签用于思想/辅助或惯用语。规范还建议了船名(但不再建议书名/歌曲名/电影名;请<cite>改用)。
  3. 如果斜体文本是较大上下文的一部分(例如,介绍性段落),则应将CSS样式附加到较大元素,即 p.intro { font-style: italic; }
2020-05-16