210

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

<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>标签的人？

4

12 回答 12

218

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

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

<i>没有错，因为它是非语义的。这是错误的（通常），因为它是表象的。关注点分离意味着呈现信息应该与 CSS 一起传达。

一般来说，命名可能很难正确，类名也不例外，但这是你必须做的。如果您使用斜体来使块从正文中突出显示，那么“flow-distincttive”的类名可能是合适的。考虑重用：类名用于分类——你还想在哪里做同样的事情？这应该可以帮助您确定合适的名称。

<i>包含在 HTML5 中，但被赋予了特定的语义。如果您将某些内容标记为斜体的原因符合规范中确定的语义之一，则使用<i>. 否则不行。

于 2010-01-21T10:39:01.103 回答
10

我不是专家，但我想说，如果你真的想要语义化，你应该使用词汇表 (RDFa)。

这应该会导致类似的结果：

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

em用于表示（人类将看到它以斜体显示），并且property和href属性链接到斜体的定义（对于机器）。

您应该检查是否有此类事物的词汇表，也许属性已经存在。

更多关于 RDFa 的信息：http ://www.alistapart.com/articles/introduction-to-rdfa/

于 2010-01-21T10:31:08.747 回答
7

TLDR

使文本斜体的正确方法是忽略问题，直到到达 CSS，然后根据表示语义设置样式。根据具体情况，您提供的前两个选项可能是正确的。最后两个是错误的。

更长的解释

编写标记时不要担心演示。不要用斜体字来思考。从语义的角度思考。如果它需要强调强调，那么它是一个em。如果它与主要内容相切，那么它是一个aside. 也许是粗体，也许是斜体，也许是荧光绿。编写标记时无关紧要。

当您确实使用 CSS 时，您可能已经有了一个语义元素，在您的站点中所有出现的地方都用斜体表示是有意义的。em是一个很好的例子。但也许您希望aside > ul > li您网站上的所有内容都以斜体显示。您必须将考虑标记与考虑演示分开。

正如DisgruntledGoat所提到的，i在 HTML5 中是语义化的。不过，语义对我来说似乎有点狭窄。使用可能很少见。

的语义em在 HTML5 中发生了变化，以强调强调。strong也可以用来表示重要性。strong如果你想这样设置它，可以是斜体而不是粗体。不要让浏览器的样式表限制你。您甚至可以使用重置样式表来帮助您停止思考默认设置。（虽然有一些警告。）

class="italic"不好。不要使用它。它不是语义的，根本不灵活。表示仍然具有语义，只是与标记不同。

class="footnote"正在模拟标记语义，也是不正确的。您的脚注 CSS 不应该完全是您的脚注所独有的。如果每个部分的样式都不同，您的网站会显得过于凌乱。您应该有一些分散在页面中的视觉模式，您可以将它们转换为 CSS 类。如果您的脚注和大引号的风格非常相似，那么您应该将相似之处归为一类，而不是一遍又一遍地重复自己。您可以考虑采用 OOCSS 的做法（链接如下）。

HTML5 中关注点和语义的分离很大。人们通常没有意识到标记并不是语义很重要的唯一地方。有内容语义 (HTML)，但也有表现语义 (CSS) 和行为语义 (JavaScript)。它们都有自己独立的语义，这些语义对于可维护性和保持 DRY 非常重要。

OOCSS 资源

于 2013-09-06T00:46:54.423 回答
5

也许它没有特殊含义，只需要以斜体呈现，以便在表现上将其与前面的文本分开。

如果它没有特殊含义，为什么需要在表示上与前面的文本分开？这段文字看起来有点奇怪，因为我无缘无故地把它斜体了。

不过，我确实同意你的观点。设计师制作视觉上不同但没有有意义变化的设计并不少见。我经常在盒子上看到这种情况：设计师会给我们设计的盒子包括各种颜色、角落、渐变和阴影的组合，样式和内容的含义之间没有关系。

因为这些是在不同地方重复使用的相当复杂的样式（与相关的 Internet Explorer 问题），所以我们创建了 , 之类的类box-1，box-2以便我们可以重复使用这些样式。

使某些文本斜体的具体示例太琐碎了，无需担心。最好把这样的细节留给语义疯子争论。

于 2010-01-21T10:38:26.187 回答
3

HTML 斜体文本以斜体格式显示文本。

<i>HTML italic text example</i>

强调和强烈的元素都可以用来增加某些单词或句子的重要性。

<p>This is <em>emphasized </em> text format <em>example</em></p>

当您想强调文本中的某个点时，应该使用强调标记，而不一定要在您想使该文本变为斜体时使用。

有关更多信息，请参阅本指南：HTML 文本格式

于 2015-11-29T04:23:56.630 回答
2

该i元素是非语义的，因此对于屏幕阅读器、Googlebot 等，它应该是某种透明的（就像span或div元素一样）。但这对开发人员来说不是一个好的选择，因为它将表示层与结构层连接在一起——这是一种不好的做法。

emelement （strong以及）应始终在语义上下文中使用，而不是在表示上下文中使用。每当某个单词或句子很重要时，就必须使用它。仅作为上一句中的示例，我应该使用em来更加强调“应该始终使用”部分。浏览器为这些元素提供了一些默认的 CSS 属性，但是如果您的设计需要这样做以保持这些元素的正确语义含义，您可以并且应该覆盖默认值。

<span class="italic">Italic Text</span>是最错误的方式。首先，使用起来不方便。其次，它建议文本应该是斜体。结构层（HTML、XML 等）不应该这样做。演示文稿应始终与结构分开。

<span class="footnote">Italic Text</span>似乎是脚注的最佳方式。它不建议任何演示，只是描述标记。您无法预测该功能会发生什么。如果功能中出现脚注，您可能会被迫更改其类名（以在代码中保留一些逻辑）。

因此，每当您有一些重要的文本时，请使用em或strong强调它。但请记住，这些元素是内联元素，不应用于强调大块文本。

如果您只关心某物的外观并始终尽量避免任何额外的标记，请使用 CSS。

于 2010-01-21T11:02:41.280 回答
1

我认为答案是<em>在您打算强调时使用。

如果在给自己朗读文本时，你发现你使用了稍微不同的声音来强调一个点，那么应该使用它，<em>因为你希望屏幕阅读器做同样的事情。

如果它纯粹是一种样式，比如你的设计师决定你的所有<h2>标题都用斜体 Garamond 看起来会更好，那么在 HTML 中包含它没有语义上的理由，你应该只为适当的元素更改 CSS。

我看不出有任何使用的理由<i>，除非您特别需要支持一些没有 CSS 的旧版浏览器。

于 2010-01-21T11:05:10.797 回答
0

我会说使用<em>来强调内联元素。为块元素（如文本块）使用一个类。CSS 与否，文本仍然需要标记。无论是用于语义还是视觉辅助，我假设您会将它用于有意义的事情......

如果您出于任何原因强调文本，则可以使用<em>, 或将文本斜体化的类。

偶尔打破规则是可以的！

于 2010-01-21T14:17:15.297 回答
0

好的，首先要注意的是<i>已被弃用，不应使用 <i>尚未被弃用，但我仍然不建议使用它——详情请参阅评论。这是因为它完全违背了将表示保留在表示层中，正如您所指出的那样。同样，<span class="italic">似乎也打破了常规。

所以现在我们有两种真正的做事方式：<em>和<span class="footnote">. 请记住，这em代表强调。当您希望对单词、短语或句子进行强调时，<em>无论您是否需要斜体，都将其粘贴在标签中。如果您想以其他方式更改样式，请使用 CSS: em { font-weight: bold; font-style: normal; }。当然，你也可以对<em>标签应用一个类：如果你决定想要某些强调的短语以红色显示，给它们一个类并将其添加到 CSS 中：

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

如果您出于其他原因应用斜体，请使用其他方法并为该部分指定一个类。这样，您可以随时更改其样式，而无需调整 HTML。在你的例子中，脚注不应该被强调——事实上，它们应该被淡化，因为脚注的目的是显示不重要但有趣或有用的信息。在这种情况下，最好将一个类应用到脚注并使其看起来像表示层中的一个类——CSS。

于 2010-01-21T10:37:37.237 回答
-1

如果您在内容中需要一些斜体字/字符而没有其他样式，请使用 <em>。它还有助于使内容语义化。

text-style更适合多种风格，没有语义需求。

于 2010-01-21T10:37:50.560 回答
-3

做

  1. 给类属性一个值，表示数据的性质（即class="footnote"好）

  2. 为页面创建 CSS 样式表

  3. 定义附加到您分配给元素的类的 CSS 样式

    .footnote { font-style:italic; }

不要

  1. 不要使用<i>or<em>元素 - 它们不受支持，并且将数据和演示文稿联系得太紧密。
  2. 不要给类一个指示表示规则的值（即不要使用class="italic"）。
于 2012-02-22T17:42:03.643 回答