什么是使文本斜体的正确方式?

What is the correct way 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>

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.

这是“老办法”。没有语义意义，只是传达了使文本斜体化的呈现效果。在我看来，这显然是错误的，因为这是非语义性的。

<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.

这是为了纯粹的表示目的而使用语义标记。在默认情况下，会以斜体显示文本，因此经常被那些意识到应该被避免，但不知道其语义含义的人使用。不是所有的斜体文本都是斜体的，因为它被强调。有时，它可以是完全相反的，如侧音或耳语。

<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类来放置表示。这通常被吹捧为正确的方式，但这在我看来似乎是错误的。这似乎并没有传达任何的语义。但是，它的支持者认为，如果你以后想大胆地修改你所有的斜体文字，要容易得多。然而，事实并非如此，因为这样我就剩下一个名为“斜体”的类，它将文本呈现为粗体。此外，我也不清楚为什么我想要改变我网站上所有的斜体文字，或者至少我们可以想出一些不需要的例子。

<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?

   当语义没有足够的强度时，它可以改变。假设我使用了“脚注”，仅仅基于页面底部的文本。几个月后，当我想在底部添加更多的文本时，会发生什么?它不再是一个脚注。我们如何选择一个比更通用的语义类，却避免了这些问题?

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被吹捧为的替代品，而在某些情况下，这实际上并没有多大用处。这让我想起了不起眼的标签，我想知道这一系列的想法是否是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?

关于这个话题有什么好的博客文章吗?可能是那些参与决定保留/创建标签的人?

12 个解决方案

#1

You should use different methods for different use cases:

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

1. If you want to emphasise a phrase, use <em>.
2. 如果你想强调一个短语，使用。
3. 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).
4. 在HTML5中，标签有了一个新的含义，它代表了“不同声音或不同情绪下的文本跨度”。所以，你应该用这个标签来表达思想/asides或习惯用语。该规范还建议使用船名(但不再建议使用书/歌/电影名;使用代替)。
5. 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; }
6. 如果斜体字是更大背景的一部分，比如引言段落，你应该将CSS样式附加到较大的元素上，即p.intro {font-style: italic;}

#2

<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.

没有错，因为它是非语义的。它(通常)是错误的，因为它是表象的。关注的分离意味着应该用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- specific”的类名。考虑一下重用:类名用于分类——您还想在哪里做同样的事情?这将帮助您确定合适的名称。

<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.

包含在HTML5中，但是它有特定的语义。如果您将某项标记为斜体的原因符合规范中标识的语义之一，则应该使用。否则不。

#3

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>

em is used for the presentation (humans will see it in italic) and the property and href attributes are linking to a definition of what italic is (for machines).

em用于表示(人类将在斜体中看到)，属性和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/tiontordfa/。

#4

tl;dr

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，如果它与主要内容相切，那么它就是一个旁白。可能是粗体，可能是斜体，也可能是荧光绿色。当你在写标记时，这并不重要。

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. em is a good example. But maybe you want all aside > ul > li on your site in italics. You have to separate thinking about the markup from thinking about the presentation.

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

As mentioned by DisgruntledGoat i is semantic in HTML5. The semantics seem kinda narrow to me though. Use will probably be rare.

正如心怀不满的山羊i在HTML5中的语义。但我觉得语义学似乎有点狭隘。使用可能很少。

The semantics of em have changed in HTML5 to stress emphasis. strong can be used to show importance as well. strong can 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 stylesheet to help you stop thinking within the defaults. (Though there are some caveats.)

在HTML5中，em的语义已经转变为强调强调。强也可以用来表示重要性。如果你想用斜体而不是粗体来设计，那么strong可以是斜体的，而不是粗体的。不要让浏览器的样式表限制您。您甚至可以使用重置样式表来帮助您停止在默认情况下思考。(尽管有一些警告。)

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

类=“斜体”是不好的。不要使用它。它没有语义，也没有灵活性。表示仍然具有语义，只是与标记不同。

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="脚注"正在模拟标记语义，而且也不正确。脚注的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)。它们都有各自独立的语义，这些语义对于可维护性和保持干枯非常重要。

OOCSS Resources

• Object Oriented CSS
• 面向对象的CSS
• An Introduction To Object Oriented CSS (OOCSS)
• 面向对象CSS (OOCSS)的介绍
• How to Write Object Oriented CSS
• 如何编写面向对象的CSS
• Getting started with Object-Orientated CSS (OOCSS)
• 开始使用面向对象的CSS (OOCSS)
• Object-Oriented CSS: What, How, and Why
• 面向对象的CSS:什么，如何，为什么。
• Diving into Object Oriented CSS
• 深入到面向对象的CSS

#5

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.

具体的例子，使一些文本斜体是太琐碎而不必担心。最好的细枝末节就像语义上的疯子争论的那样。

#6

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

我认为答案是在你想强调的时候使用。

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

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

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.

如果这纯粹是一种风格的东西，比如您的设计人员已经决定，您的

标题在italic Garamond中看起来会更好一些，那么在HTML中就没有语义原因将其包含在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的遗留浏览器。

#7

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

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

em element (strong as well) should be always used in semantic context, not 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 em to 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 default values if your design requires this to keep the correct semantic meaning of these elements.

em元素(同样强大)应该总是在语义上下文中使用，而不是表示一。当某些词或句子很重要时，就必须用它。举一个例子，在前面的句子中，我应该用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 structure layer (HTML, XML, etc.) shouldn't ever do it. Presentation should be always kept separated from the structure.

italtext 是最错误的方法。首先，它使用起来不方便。其次，它建议文本应该是斜体的。而结构层(HTML、XML等)不应该这样做。表示应该始终与结构分开。

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

Italic Text似乎是脚注的最佳方式。这并不意味着任何演示只是描述了标记。你无法预测这个特性会发生什么。如果脚注将在特性中长大，您可能*更改它的类名(以便在代码中保留一些逻辑)。

So whenever you've some important text use em or strong to emphasis it. But remember that these elements are inline elements and shouldn't be used to emphasis large block of text.

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

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

如果您只关心某些东西的外观，并且总是尽量避免额外的标记，请使用CSS。

#8

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>

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: http://www.snoopcode.com/html/html-text-formating

更多信息请参见本指南:http://www.snoopcode.com/html/html-text格式

#9

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...

使用来强调内联元素。使用类作为块元素，如文本块。无论是否CSS，文本仍然需要标记。不管是语义上的还是视觉上的帮助，我猜你会用它来做一些有意义的事情……

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

如果你因为任何原因强调文本，你可以使用，或者是一个italicizes你的文本的类。

It's OK to break the rules sometimes!

有时打破规则是可以的!

#10

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.

好的，首先要注意的是已经被弃用，不应该使用还没有被弃用，但是我仍然不建议使用它——详细信息请参阅注释。这是因为它完全反对在表示层中保留表示，您已经指出了这一点。同样，似乎也打破了这种模式。

So now we have two real ways of doing things: <em> and <span class="footnote">. Remember that em stands 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代表强调。当你想要强调一个词、短语或句子时，不管你是否想要斜体，都要把它放在标签中。如果您想以其他方式更改样式，请使用CSS: em {font-weight: bold;字体样式:正常;}。当然，您也可以对标签应用一个类:如果您决定要某些强调的短语以红色显示，给它们一个类，并将其添加到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。

#11

Use if you need some words/chars italic in content without other styles. It also helps makes content semantic.

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

text-style is better suited for multiple styles and no semantic need.

文本样式更适合多种样式，不需要任何语义需求。

#12

DO

做

1. Give the class attribute a value indicating the nature of the data (i.e. class="footnote" is good)

   给类属性一个值，指示数据的性质(例如，class="脚注"是好的)

2. Create a CSS style sheet for the page

   为页面创建一个CSS样式表。

3. Define a CSS style that is attached to the class that you assign to the element

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

   .footnote { font-style:italic; }

   .footnote {字体样式:斜体;}

DO NOT

不

1. Don't use <i> or <em> elements - they're unsupported and ties the data and presentation too close.
2. 不要使用或元素—它们不受支持，并且将数据和表示联系得太紧密。
3. Don't give the class a value that indicates the presentation rules (i.e. don't use class="italic").
4. 不要给类一个指示表示规则的值(例如，不要使用class="斜体")。