使文本变成斜体的正确方法是什么?我看到了以下四种方法:

<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 = "斜体”>

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.


<跨越阶层= footnote”>

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

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


总结

在许多情况下,语义的要求似乎过于繁重,在这些情况下,使某些内容成为斜体的愿望并不意味着具有语义意义。

此外,将样式与结构分离的愿望导致CSS被吹捧为<i>的替代品,当它实际上没有那么有用的时候。所以这让我回到卑微的<i>标签,并想知道这条思路是否是它留在HTML5规范中的原因?

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


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

结果应该是这样的:

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

Em用于表示(人类将看到它是斜体),属性和href属性链接到斜体的定义(对于机器)。

你应该检查是否有这样的词汇表,也许属性已经存在。

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


好的,首先要注意的是<i>已弃用,不应该使用<i>已弃用,但我仍然不建议使用它——查看评论了解详细信息。这是因为它完全违背了将表示保留在表示层,正如您所指出的那样。类似地,<span class="italic">似乎也打破了这个模式。

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:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

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


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

文本样式更适合多种样式,没有语义需求。


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

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

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

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

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


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

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

<i>包含在HTML5中,但是给出了特定的语义。如果将某些内容标记为斜体的原因符合规范中确定的语义之一,则使用<i>是合适的。否则不。


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

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

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

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

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

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


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

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

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

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


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

If you want to emphasise a phrase, use <em>. 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). 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; }


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

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

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


DO

给class属性一个值,表明数据的性质(例如,class="footnote"是好的) 为页面创建一个CSS样式表 定义一个CSS样式,它附加到指定给元素的类上 .footnote { 字体样式:斜体; }

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


TLDR

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

更详细的解释

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

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

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

em的语义在HTML5中发生了变化,以强调强调。Strong也可以用来表示重要性。Strong可以是斜体,而不是粗体,如果这是你想要的样式。不要让浏览器的样式表限制你。您甚至可以使用reset样式表来帮助您停止在默认值范围内思考。(不过也有一些注意事项。)

Class =“斜体”是不好的。不要用它。它不是语义的,一点也不灵活。表示仍然有语义,只是不同于标记。

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

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

允许资源

面向对象的CSS 面向对象的CSS (OOCSS)简介 如何编写面向对象的CSS 开始学习面向对象的CSS (OOCSS) 面向对象的CSS:什么,如何,为什么 深入研究面向对象的CSS


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

<i>HTML italic text example</i>

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

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

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

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