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

CSS/HTML: What is the correct way to make text italic?

提问by Rupert Madden-Abbott

What is the correctway to make text italic? I have seen the following four approaches:

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

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

---

---

<i>

<i>

This is the "old way". <i>has no semantic meaning and only conveys the presentational effect of making the text italic. As far as I can see, this is clearly wrong because this is non-semantic.

这是“老方法”。<i>没有语义，仅传达使文本斜体的表现效果。据我所知，这显然是错误的，因为这是非语义的。

---

---

<em>

<em>

This uses semantic mark up for purely presentational purposes. It just happens that <em>by default renders text in italic and so it is often used by those who are aware that <i>should be avoided but who are unaware of its semantic meaning. Not all italic text is italic because it is emphasised. Sometimes, it can be the exact opposite, like a side note or a whisper.

这将语义标记用于纯粹的展示目的。碰巧的是<em>，默认情况下以斜体呈现文本，因此它经常被那些知道<i>应该避免但不知道其语义含义的人使用。并非所有斜体文本都是斜体，因为它被强调。有时，它可能正好相反，例如旁注或耳语。

---

---

<span class="italic">

<span class="italic">

This uses a CSS class to place presentation. This is often touted as the correct way but again, this seems wrong to me. This doesn't appear to convey any more semantic meaning that <i>. But, its proponents cry, it is much easier to change all your italic text later if you, say, wanted it bold. Yet this is not the case because I would then be left with a class called "italic" that rendered text bold. Furthermore, it is not clear why I would ever want to change all italic text on my website or at least we can think of cases in which this would not be desirable or necessary.

这使用 CSS 类来放置演示文稿。这通常被吹捧为正确的方法，但同样，这对我来说似乎是错误的。这似乎没有传达任何更多的语义含义<i>。但是，它的支持者哭诉说，如果您想要粗体，以后更改所有斜体文本要容易得多。然而，情况并非如此，因为我会留下一个名为“斜体”的类，该类将文本呈现为粗体。此外，不清楚为什么我会想要更改我网站上的所有斜体文本，或者至少我们可以想到不希望或不需要这样做的情况。

---

---

<span class="footnote">

<span class="footnote">

This uses a CSS class for semantics. So far this appears to be the best way but it actually has two problems.

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

1. Not all text has sufficient meaning to warrant semantic markup. For example, is italicised text at the bottom of the page really a footnote? Or is it an aside? Or something else entirely. Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

2. Semantic meaning can change when it is not present in sufficient strength. Lets say I went along with "footnote" based upon nothing more than the text being at the bottom of the page. What happens when a few months later I want to add more text at the bottom? It is no longer a footnote. How can we choose a semantic class that is less generic than <em>but avoids these problems?

1. 并非所有文本都有足够的意义来保证语义标记。例如，页面底部的斜体文本真的是脚注吗？或者是旁观？或者完全是别的东西。也许它没有特殊含义，只需要以斜体呈现，以便在外观上将其与前面的文本分开。

2. 当语义的强度不够时，语义可能会发生变化。假设我根据页面底部的文本选择了“脚注”。当几个月后我想在底部添加更多文本时会发生什么？它不再是一个脚注。我们如何才能选择一个不那么通用<em>但可以避免这些问题的语义类？

---

---

Summary

概括

It appears that the requirement of semantics seems to be overly burdensome in many instances where the desire to make something italic is not meant to carry semantic meaning.

在许多情况下，语义的要求似乎过于繁重，在这种情况下，希望将某些东西变成斜体并不意味着要承载语义。

Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to <i>when there are occasions when this would actually be less useful. So this leaves me back with the humble <i>tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?

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

Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the <i>tag?

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

回答by DisgruntledGoat

You should use different methods for different use cases:

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

1. If you want to emphasise a phrase, use <em>.
2. The <i>tag has a new meaning in HTML5, representing "a span of text in an alternate voice or mood". So you should use this tag for things like thoughts/asides or idiomatic phrases. The spec also suggests ship names (but no longer suggests book/song/movie names; use <cite>for that instead).
3. If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element, i.e. p.intro { font-style: italic; }

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

回答by Alohci

<i>is not wrong because it is non-semantic. It's wrong (usually) because it's presentational. Separation of concern means that presentional information should be conveyed with CSS.

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

Naming in general can be tricky to get right, and class names are no exception, but nevertheless it's what you have to do. If you're using italics to make a block stand out from the body text, then maybe a class name of "flow-distinctive" would be in order. Think about reuse: class names are for categorization - where else would you want to do the same thing? That should help you identify a suitable name.

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

<i>is included in HTML5, but it is given specific semantics. If the reason why you are marking something up as italic meets one of the semantics identified in the spec, it would be appropriate to use <i>. Otherwise not.

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

回答by Guillaume Flandre

I'm no expert but I'd say that if you really want to be semantic, you should use vocabularies (RDFa).

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

This should result in something like that:

这应该导致这样的事情：

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

emis used for the presentation (humans will see it in italic) and the propertyand hrefattributes are linking to a definition of what italic is (for machines).

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

You should check if there's a vocabulary for that kind of thing, maybe properties already exist.

您应该检查是否有这种东西的词汇表，也许属性已经存在。

More info about RDFa here: http://www.alistapart.com/articles/introduction-to-rdfa/

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

回答by Eva

TLDR

TLDR

The correct way to make text italic is to ignore the problem until you get to the CSS, then style according to presentational semantics. The first two options you provided could be right depending on the circumstances. The last two are wrong.

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

Longer Explanation

更长的解释

Don't worry about presentation when writing the markup. Don't think in terms of italics. Think in terms of semantics. If it requires stress emphasis, then it's an em. If it's tangential to the main content, then it's an aside. Maybe it'll be bold, maybe it'll be italic, maybe it'll be fluorescent green. It doesn't matter when you're writing markup.

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

When you do get to the CSS, you might already have a semantic element that makes sense to put italics for all its occurrences in your site. emis a good example. But maybe you want all aside > ul > lion your site in italics. You have to separate thinking about the markup from thinking about the presentation.

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

As mentioned by DisgruntledGoat, iis semantic in HTML5. The semantics seem kind of narrow to me, though. Use will probably be rare.

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

The semantics of emhave changed in HTML5 to stress emphasis. strongcan be used to show importance as well. strongcan be italic rather than bold if that's how you want to style it. Don't let the browser's stylesheet limit you. You can even use a reset stylesheetto help you stop thinking within the defaults. (Though there are some caveats.)

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

class="italic"is bad. Don't use it. It is not semantic and is not flexible at all. Presentation still has semantics, just a different kind from markup.

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

class="footnote"is emulating markup semantics and is incorrect as well. Your CSS for the footnote should not be completely unique to your footnote. Your site will look too messy if every part is styled differently. You should have some visual patterns scattered through your pages that you can turn into CSS classes. If your style for your footnotes and your blockquotes are very similar, then you should put the similarities into one class rather than repeat yourself over and over again. You might consider adopting the practices of OOCSS (links below).

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

Separation of concerns and semantics are big in HTML5. People often don't realize that the markup isn't the only place where semantics is important. There is content semantics (HTML), but there is also presentational semantics (CSS) and behavioral semantics (JavaScript) as well. They all have their own separate semantics that are important to pay attention to for maintainability and staying DRY.

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

OOCSS Resources

OOCSS 资源

• Object Oriented CSS
• An Introduction To Object Oriented CSS (OOCSS)
• How to Write Object Oriented CSS
• Getting started with Object-Orientated CSS (OOCSS)
• Object-Oriented CSS: What, How, and Why
• Diving into Object Oriented CSS

• 面向对象的 CSS
• 面向对象 CSS (OOCSS) 简介
• 如何编写面向对象的 CSS
• 面向对象的 CSS (OOCSS) 入门
• 面向对象的 CSS：什么、如何以及为什么
• 深入研究面向对象的 CSS

回答by Paul D. Waite

Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

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

If it has no special meaning, why does it need to be separated presentationally from the text preceding it? This run of text looks a bit weird, because I've italicised it for no reason.

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

I do take your point though. It's not uncommon for designers to produce designs that vary visually, without varying meaningfully. I've seen this most often with boxes: designers will give us designs including boxes with various combinations of colours, corners, gradients and drop-shadows, with no relation between the styles, and the meaning of the content.

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

Because these are reasonably complex styles (with associated Internet Explorer issues) re-used in different places, we create classes like box-1, box-2, so that we can re-use the styles.

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

The specific example of making some text italic is too trivial to worry about though. Best leave minutiae like that for the Semantic Nutters to argue about.

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

回答by Prabhakar Undurthi

HTML italic text displays the text in italic format.

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

<i>HTML italic text example</i>

The emphasis and strong elements can both be used to increase the importance of certain words or sentences.

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

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

The emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text.

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

See this guide for more: HTML Text Formatting

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

回答by Crozin

The ielement is non-semantic, so for the screen readers, Googlebot, etc., it should be some kind of transparent (just like spanor divelements). But it's not a good choice for the developer, because it joins the presentation layer with the structure layer - and that's a bad practice.

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

emelement (strongas well) should be always used in a semantic context, not a presentation one. It has to be used whenever some word or sentence is important. Just for an example in the previous sentence, I should use emto put more emphasis on the 'should be always used' part. Browsers provides some default CSS properties for these elements, but you can and you're supposed to override the default values if your design requires this to keep the correct semantic meaning of these elements.

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

<span class="italic">Italic Text</span>is the most wrong way. First of all, it's inconvenient in use. Secondly, it suggest that the text should be italic. And the structure layer (HTML, XML, etc.) shouldn'tever do it. Presentation should be always kept separated from the structure.

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

<span class="footnote">Italic Text</span>seems to be the best way for a footnote. It doesn't suggest any presentation and just describes the markup. You can't predict what will happen in the feature. If a footnote will grow up in the feature, you might be forced to change its class name (to keep some logic in your code).

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

So whenever you've some important text, use emor strongto emphasis it. But remember that these elements are inline elements and shouldn't be used to emphasis large blocks of text.

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

Use CSS if you care only about how something looks like and always try to avoid any extra markup.

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

回答by GrahamS

I think the answer is to use <em>when you intendemphasis.

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

If when reading the text to yourself, you find that you use a slightlydifferent voice to emphasisea point, then it should use <em>because you would want a screen reader to do the same thing.

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

If it is purely a style thing, such as your designer has decided that all your <h2>headings would look better in italic Garamond, then there is no semantic reason to include it in the HTML and you should just alter the CSS for the appropriate elements.

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

I can't see any reason to use <i>, unless you specifically need to support some legacy browser with no CSS.

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

回答by tahdhaze09

I'd say use <em>to emphasize inline elements. Use a class for block elements like blocks of text. CSS or not, the text still has to be tagged. Whether its for semantics or for visual aid, I'm assuming you'd be using it for something meaningful...

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

If you're emphasizing text for ANY reason, you could use <em>, or a class that italicizes your text.

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

It's OK to break the rulessometimes!

这是确定以打破规则有时！

回答by Samir Talwar

OK, the first thing to note is that <i>has been deprecated, and shouldn't be used<i>has not been deprecated, but I still do not recommend using it—see the comments for details. This is because it goes entirely against keeping presentation in the presentation layer, which you've pointed out. Similarly, <span class="italic">seems to break the mold too.

好的，首先要注意的是 <i>已被弃用，不应使用<i>还没有被弃用，但我仍然不推荐使用它——详情见评论。这是因为它完全反对在表示层中保持表示，您已经指出了这一点。同样，<span class="italic">似乎也打破了模具。

So now we have two real ways of doing things: <em>and <span class="footnote">. Remember that emstands for emphasis. When you wish to apply emphasis to a word, phrase or sentence, stick it in <em>tags regardless of whether you want italics or not. If you want to change the styling in some other way, use CSS: em { font-weight: bold; font-style: normal; }. Of course, you can also apply a class to the <em>tag: if you decide you want certain emphasised phrases to show up in red, give them a class and add it to the CSS:

所以现在我们有两种真正的做事方式：<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; }

If you're applying italics for some other reason, go with the other method and give the section a class. That way, you can change its styling whenever you want without adjusting the HTML. In your example, footnotes should not be emphasised—in fact, they should be de-emphasised, as the point of a footnote is to show unimportant but interesting or useful information. In this case, you're much better off applying a class to the footnote and making it look like one in the presentation layer—the CSS.

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