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

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

<i>Italic Text</i> <em>Italic Text</em> <span class="italic">Italic Text</span> <span class="footnote">Italic Text</span> 

<i>

这是“老路”。 没有语义意义，只能performance文字斜体的performance效果。 据我所知，这显然是错误的，因为这是非语义的。

<em>

这将语义标记用于纯粹的表示目的。 只是默认情况下，默认情况下是以斜体呈现文本，所以经常被那些意识到应该避免但不知道其语义含义的人使用。 不是所有的斜体文字都是斜体的，因为它被强调了。 有时，它可能是完全相反的，就像一个旁注或一个耳语。

<span class="italic">

这使用一个CSS类放置演示文稿。 这经常被吹捧为正确的方式，但是，这似乎是错误的。 这似乎没有传达更多的语义意义。 但是，支持者们呼喊，如果你想要大胆的话，以后要更改所有的斜体文字要容易得多。 然而，情况并非如此，因为我将留下一个名为“italic”的类，使文本变成粗体。 此外，我不清楚为什么我要改变我的网站上的所有斜体文字，或者至less我们可以想到这样的情况，这是不可取的或必要的。

<span class="footnote">

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

1. 并非所有文本都有足够的含义来保证语义标记。 例如，页面底部的斜体文字是否真的是一个注脚？ 还是一边呢？ 或者完全是别的。 也许它没有特别的意义，只需要用斜体字来表示，就可以把它与前面的文字分开来。

2. 没有足够的强度时，语义可以改变。 比方说，我只是根据页面底部的文本去做“脚注”。 几个月后会发生什么，我想在底部添加更多的文字？ 它不再是一个脚注。 我们如何select一个不如<em>通用的语义类，但避免了这些问题呢？

概要

似乎在许多情况下，语义的要求似乎是过于繁重的，这些情况下，制造某种意义的意图并不意味着具有语义意义。

此外，将风格与结构分离的愿望已经导致CSS被吹捧为在有些情况下实际上不那么有用的情况下的替代。 所以这使我留下谦卑的<i>标签，并想知道这个思路是否是留在HTML5规范中的原因？

有没有关于这个主题的好博客文章或文章？ 也许那些参与决定保留/创build<i>标签的人呢？

Answer 1

你应该为不同的用例使用不同的方法：

1. 如果您想强调一个短语，请使用<em> 。
2. <i>标记在HTML5中具有新的含义 ，表示“以不同语音或情绪的文本范围”。 所以你应该使用这个标签的东西，如思想/旁白或惯用的短语。 该规范还build议船名（但不再build议书/歌曲/电影名称;而不是使用<cite> ）。
3. 如果斜体文本是更大的上下文的一部分，比如说一个介绍性的段落，则应该将CSS样式附加到较大的元素，即p.intro { font-style: italic; } p.intro { font-style: italic; }

Answer 2

没有错，因为它是非语义的。 这是错误的（通常），因为它是表象。 分离关注意味着应该用CSS传达出示信息。

一般而言，命名可能会很棘手，而类名也不例外，但是这是您必须做的。 如果你使用斜体来使块体脱离正文，那么可能会有一个类名“flow-distinctive”。 考虑重用：类名是用于分类 – 你还想在哪里做同样的事情？ 这应该可以帮助你确定一个合适的名字。

<i>包含在HTML5中，但它被赋予特定的语义。 如果你将某些东西标记为斜体符合规范中标识的语义之一，那么使用<i>是合适的。 否则不是。

Answer 3

我不是专家，但我会说，如果你真的想成为语义，你应该使用词汇表（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/

Answer 4

TL;博士

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

更长的解释

编写标记时不要担心演示。 不要用斜体来思考。 根据语义来思考。 如果它需要强调重点，那么这是一个时间。 如果它与主要内容相切，那么它就在aside 。 也许它会是大胆的，也许会是斜体的，也许会是荧光的绿色。 编写标记时无关紧要。

当你到达CSS时，你可能已经有了一个语义元素，在你的站点中所有事件的斜体都是有意义的。 em就是一个很好的例子。 但是也许你想把所有的东西aside > ul > li你的网站上，用斜体表示。 你不得不单独考虑这个标记，从思考这个演示。

正如DisgruntledGoat所提到的， i在HTML5中是语义的。 尽pipe如此，语义看起来有点狭隘。 使用可能是罕见的。

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

class="italic"是不好的。 不要使用它。 这不是语义上的，也不是灵活的。 演示文稿仍然具有语义，与标记不同。

class="footnote"正在模拟标记语义，也是不正确的。 脚注的CSS不应该完全独立于您的脚注。 如果每个部分的风格不同，那么您的网站看起来太乱了。 你应该有一些分散在你的页面的视觉模式，你可以把它变成CSS类。 如果你的脚注风格和你的风格非常相似，那么你应该把这些相似点放在一个类中，而不是一遍又一遍地重复。 你可以考虑采用OOCSS的做法（下面的链接）。

关注点和语义的分离在HTML5中是很大的。 人们通常不会意识到标记并不是唯一重要的语义。 有内容语义（HTML），但也有表示语义（CSS）和行为语义（JavaScript）。 他们都有自己的独立的语义，重要的是要注意可维护性和保持干燥。

OOCSS资源

• 面向对象的CSS
• 面向对象CSS介绍（OOCSS）
• 如何编写面向对象的CSS
• 开始使用面向对象的CSS（OOCSS）
• 面向对象的CSS：什么，如何和为什么
• 潜入面向对象的CSS

Answer 5

也许它没有特别的意义，只需要用斜体字来表示，就可以把它与前面的文字分开来。

如果没有特别的意义，为什么需要从前面的文字中分离出来？ 这段文字看起来有点奇怪，因为我没有理由将其斜体化。

我确实接受你的观点。 devise师生产视觉上不同的devise并不罕见，而且没有任何意义上的变化。 我经常用盒子看到这个：devise师给我们的devise包括各种颜色，angular落，渐变和阴影组合的盒子，样式和内容的含义没有关系。

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

尽pipe如此，使一些文本斜体的具体例子太微不足道了。 最好的假细节就像那些为语义杂凑辩论的细节。

Answer 6

我想答案是当你打算强调时使用<em> 。

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

如果它纯粹是一种风格的东西，比如你的devise者已经决定所有的<h2>标题在斜体的Garamond中看起来会更好，那么在HTML中就没有语义上的理由，你应该改变CSS元素。

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

Answer 7

i元素是非语义的，所以对于屏幕阅读器，Googlebot等，它应该是某种透明的（就像span或div元素）。 但对开发人员来说这不是一个好的select，因为它将表示层和结构层结合在一起 – 这是一个不好的做法。

em元素（ strong ）应该总是用在语义上，而不是performanceforms。 只要某个单词或句子很重要，就必须使用它。 只是在前面的一个例子中，我应该使用它来强调“应该被永远使用”的部分。 浏览器为这些元素提供了一些默认的CSS属性，但是如果你的devise需要这些元素来保持这些元素的正确语义，你可以和你应该重写默认值。

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

<span class="footnote">Italic Text</span>似乎是脚注的最佳方式。 它并没有暗示任何介绍只是描述了加价。 您无法预测该function会发生什么情况。 如果脚注将在特性中成长，您可能会被迫更改其类名（以在代码中保留一些逻辑）。

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

如果你只关心某个东西的样子，那么就使用CSS，并且总是试图避免任何额外的标记。

Answer 8

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

 <i>HTML italic text example</i> 

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

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

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

有关更多信息，请参阅本指南： http : //www.snoopcode.com/html/html-text-formating

Answer 9

我会说使用<em>强调内联元素。 使用类的块类似于文本块。 CSS与否，文本仍然必须被标记。 不pipe它是用于语义还是用于视觉辅助，我都假设你会用它来做一些有意义的事情。

如果您因任何原因而强调文本，则可以使用<em>或斜体显示文本的类。

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

Answer 10

好的，首先要注意的是 <i>已被弃用，不应使用 <i>尚未被弃用，但我仍然不build议使用它 – 请参阅评论的细节。 这是因为它完全反对保持表示层，你已经指出。 同样， <span class="italic">似乎也打破了模式。

所以现在我们有两种真正的做法： <em>和<span class="footnote"> 。 请记住， em代表重点 。 如果您希望将重点应用于单词，短语或句子，请将其放在<em>标记中，而不pipe您是否需要斜体。 如果您想以其他方式更改样式，请使用CSS： em { font-weight: bold; font-style: normal; } em { font-weight: bold; font-style: normal; } 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。 在你的例子中，脚注不应该被强调 – 实际上，它们应该被忽略，因为脚注的目的是显示不重要但有趣或有用的信息。 在这种情况下，在脚注中应用一个类会更好，并使它看起来像performance层中的CSS一样。

Answer 11

使用，如果你需要一些文字/字体斜体的内容没有其他风格。 它也有助于使内容的语义。

文本风格更适合多种风格，没有语义需求。

Answer 12

做

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

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

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

   .footnote { font-style:italic; }

不要

1. 不要使用<i>或<em>元素 – 它们不受支持，并将数据和表示紧密联系在一起。
2. 不要给这个类指定表示规则的值（即不要使用class="italic" ）。