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

时间：2010-01-21 10:11:43

标签： html css semantic-markup

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

<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>更不通用的语义类，但避免了这些问题呢？


    3. 摘要

    似乎在许多情况下，语义的要求似乎过于繁琐，在这种情况下，制作斜体的意图并不意味着具有语义含义。

    此外，将样式与结构分开的愿望导致CSS被吹捧为<i>的替代品，当有时候这种情况实际上不那么有用。所以这让我回到了简陋的<i>标签，并想知道这一思路是否是它留在HTML5规范中的原因？

    是否有关于此主题的好文章或文章？也许那些参与决定保留/创建<i>标签的人？

12 个答案:

答案 0 :(得分：195)

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

  1. 如果您想强调短语，请使用<em>。
  2. <i>标记有new meaning in HTML5，表示“备用语音或心情中的文本范围”。因此，您应该将此标记用于诸如思想/旁白或惯用语之类的内容。该规范还建议使用船名（但不再建议使用书籍/歌曲/电影名称;而是使用<cite>代替）。
  3. 如果斜体文本是较大上下文的一部分，比如介绍段落，则应将CSS样式附加到较大的元素，即p.intro { font-style: italic; }

答案 1 :(得分：21)

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

一般来说命名可能很难实现，而且类名也不例外，但它仍然是你必须要做的。如果你使用斜体来使一个块从正文中脱颖而出，那么可能会有一个“流程与众不同”的类名。考虑重用：类名是用于分类 - 你还想在哪里做同样的事情？这应该可以帮助您确定合适的名称。

<i>包含在HTML5中，但它具有特定的语义。如果您将标记为斜体的原因符合规范中标识的语义之一，则使用<i>是合适的。否则不会。

答案 2 :(得分：9)

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

这应该会产生类似的结果：

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

em用于演示（人类将以斜体显​​示），property和href属性链接到斜体的定义（对于机器）。< / p>

您应该检查是否存在针对该类事物的词汇，可能已存在属性。

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

答案 3 :(得分：7)

TL;博士

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

更长的解释

编写标记时不要担心演示文稿。不要以斜体字来思考。从语义的角度思考。如果它需要强调压力，则它是em。如果它与主要内容相切，那么它是aside。也许它会大胆，也许它会是斜体，也许它会变成荧光绿。你在写标记时没关系。

当你进入CSS时，你可能已经有了一个语义元素，可以在你的网站中显示所有出现的斜体。 em就是一个很好的例子。但也许您希望网站上的所有aside > ul > li都以斜体显示。你必须将关于标记的思考与思考演示分开。

正如DisgruntledGoat所提到的i在HTML5中是语义的。尽管如此，语义似乎有点狭隘。使用可能很少见。

HTML5中em的语义已经发生了变化，以强调重点。 strong也可用于显示重要性。 strong可以是斜体而不是粗体，如果你想要它的样式。不要让浏览器的样式表限制你。您甚至可以使用reset stylesheet来帮助您在默认值内停止思考。 （虽然there are some caveats。）

class="italic"很糟糕。不要使用它。它根本不是语义的，也不是灵活的。演示文稿仍然具有语义，与标记不同。

class="footnote"正在模拟标记语义，也是不正确的。脚注的CSS不应该完全独特于脚注。如果每个部件的样式不同，您的网站看起来会太乱。您应该在页面中分散一些视觉模式，然后您可以转换为CSS类。如果你的脚注和你的块引用的风格非常相似，那么你应该将相似性放在一个类中而不是一遍又一遍地重复。您可以考虑采用OOCSS的做法（下面的链接）。

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

OOCSS资源

答案 4 :(得分：5)

  

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

如果没有特殊含义，为什么需要将其与之前的文本分开？ 这一段文字看起来有点奇怪，因为我没有理由将它用于斜体。

我确实理解你的观点。对于设计师来说，制作视觉上不同的设计并不会有意义地变化并不罕见。我最经常看到盒子：设计师会给我们设计包括各种颜色，角落，渐变和阴影组合的盒子，样式之间没有关系，内容的含义。

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

尽管如此，制作一些文本斜体的具体例子太过微不足道了。对于Semantic Nutters来说，最好留下细节。

答案 5 :(得分：1)

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，并始终尽量避免任何额外的标记。

答案 6 :(得分：1)

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

如果在阅读文字给自己时，您发现使用略微不同的语音来强调某个点，那么它应该使用<em>，因为您希望屏幕阅读器做同样的事情。

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

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

答案 7 :(得分：1)

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

答案 8 :(得分：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。

答案 9 :(得分：0)

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

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

有时违反规则是可以的！

答案 10 :(得分：-1)

如果您在没有其他样式的内容中需要一些单词/字符斜体，请使用。它还有助于使内容具有语义性。

text-style更适合多种样式而且没有语义需求。

答案 11 :(得分：-3)

<强> DO

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

  2. 为页面

    3. 创建CSS样式表

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

    .footnote { font-style:italic; }

    4. 不要

    1. 不要使用<i>或<em>元素 - 它们不受支持，并且数据和演示文稿的联系太紧。
    2. 不要给该类一个表示表示规则的值（即不要使用class="italic"）。
相关问题
最新问题