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

正确< em > < / em >是如何使文本变成斜体的?我看到了以下四种方法:

<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>标记的人?

275015 次浏览
小开

我不是专家，但我想说，如果您真的想要语义化，您应该使用词汇表(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/

小开

好吧，首先要注意的是<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。

小开

如果你需要一些斜体的单词/字符而没有其他样式，可以使用<em>。它还有助于使内容具有语义性。

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

小开

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

如果它没有特殊的意义，为什么它需要从它前面的文本中分离出来?这段文字看起来有点奇怪，因为我无缘无故地把它斜体了。

不过我同意你的观点。对于设计师来说，设计在视觉上变化，但没有意义上的变化是很常见的。我经常在盒子上看到这种情况:设计师会给我们设计包括各种颜色、角落、渐变和阴影组合的盒子，风格和内容之间没有任何关系。

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

不过，将一些文本变成斜体的具体示例太琐碎了，不需要担心。最好把这些细枝末节留给语义狂人们去争论。

小开

<i>没有错，因为它是非语义的。这是错误的(通常)，因为它是表现。关注点分离意味着应该用CSS来传达表示信息。

一般来说，要正确命名可能很棘手，类名也不例外，但无论如何，这是您必须要做的。如果您使用斜体使一个块从正文文本中脱颖而出，那么可能需要一个“flow-distinctive”类名。考虑重用:类名是用于分类的——您还想在其他什么地方做同样的事情?这将帮助您确定一个合适的名称。

<i>包含在HTML5中，但它被赋予了特定的语义。如果你将某物标记为斜体的原因符合规范中确定的语义之一，则使用<i>是合适的。否则不。

小开

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

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

<span class="italic">Italic Text</span>是最错误的方式。首先，它使用起来很不方便。其次，建议正文采用斜体。而结构层(HTML, XML等)不应该曾经做过。表示应该始终与结构分离。

<span class="footnote">Italic Text</span>似乎是脚注的最佳方式。它不建议任何表示，只是描述标记。你无法预测剧情中会发生什么。如果一个脚注将在特性中增加，您可能会被迫更改它的类名(以在代码中保留一些逻辑)。

所以当你有一些重要的文本时，使用em或strong来强调它。但是请记住，这些元素是内联元素，不应该用于强调大块的文本。

如果你只关心事物的外观，并且总是尽量避免任何额外的标记，那么就使用CSS。

小开

我认为答案是当你强调意愿时使用<em>。

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

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

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

小开
最佳答案

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

  1. 如果你想强调一个短语，使用<em>。
  2. <i>标记有一个HTML5的新意义，表示“一段以不同语气或语气表达的文本”。所以你应该把这个标签用在想法/旁白或惯用短语上。规范还建议了船只名称(但不再建议书籍/歌曲/电影名称;使用<cite>代替)。
  3. 如果斜体文本是一个更大的上下文的一部分，比如一个介绍段，你应该将CSS样式附加到更大的元素，即p.intro { font-style: italic; }
小开

我会说使用<em>来强调内联元素。为块元素(如文本块)使用类。不管是不是CSS，文本都必须被标记。不管它是为了语义还是视觉辅助，我假设你会用它来做一些有意义的事情……

如果你出于任何原因强调文本，你可以使用<em>，或者一个斜体文本的类。

有时候打破规则是可以的!

小开

做

  1. 给class属性一个值，表明数据的性质(例如class="footnote"是好的)

  2. 为页面创建一个CSS样式表

  3. 定义一个CSS样式，它附加到你分配给元素的类上

    < p > <代码>。脚注{ 字体样式:斜体; 代码}< / > < / p > < /李>

不

  1. 不要使用<i>或<em>元素——它们不受支持，而且会将数据和表示绑得太紧。
  2. 不要给类指定表示规则的值(即不要使用class="italic")。
小开

TLDR

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

更详细的解释

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

当您使用CSS时，您可能已经有了一个语义元素，可以将其在站点中出现的所有内容都用斜体字表示。em就是一个很好的例子。但也许你想在你的网站上用斜体显示所有aside > ul > li。你必须把标记和表示分开考虑。

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

在HTML5中，em的语义发生了变化，以强调强调。strong也可以用来表示重要性。strong可以是斜体而不是粗体，如果这是你想要的样式。不要让浏览器的样式表限制你。你甚至可以使用重置样式表来帮助你停止在默认值范围内思考。(尽管这里有一些警告。)

class="italic"是坏的。不要用它。它不是语义的，一点也不灵活。表示仍然有语义，只是不同于标记。

class="footnote"正在模拟标记语义，也是不正确的。脚注的CSS不应该完全与脚注不同。如果每个部分的样式都不一样，你的网站看起来会太乱。您应该在页面中散布一些可视模式，可以将它们转换为CSS类。如果你的脚注和引文的风格非常相似，那么你应该把相似之处集中在一起，而不是一遍又一遍地重复。您可以考虑采用OOCSS的实践(链接如下)。

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

允许资源

小开

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

<i>HTML italic text example</i>

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

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

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

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


提交答案