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

Question

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

<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>但又避免这些问题的语义类？

摘要

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

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

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

Answer 1

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

1. 如果你想强调一个短语,请使用<em>.
2. 该<i>标签具有在HTML5新的含义,代表"一个在可替代的语音或文本心情跨度".因此,您应该将此标记用于诸如思想/旁白或惯用语之类的内容.规范还建议使用船名(但不再建议使用书籍/歌曲/电影名称; <cite>而是使用该名称).
3. 如果斜体文字是一个更大的范围内的部分,说的入门款,应该在CSS样式连接到更大的元素,即 p.intro { font-style: italic; }

Answer 2

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

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

<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之前忽略问题,然后根据表示语义进行样式设置.您提供的前两个选项可能是正确的,具体取决于具体情况.最后两个是错的.

更长的解释

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

当你进入CSS时,你可能已经有了一个语义元素,可以在你的站点中显示所有出现的斜体.em是一个很好的例子.但也许你想要aside > ul > li在你的网站上用斜体字表示所有内容.你必须将关于标记的思考与思考表达分开.

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

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

class="italic"不好.不要使用它.它根本不是语义的,也不是灵活的.演示文稿仍然具有语义,与标记不同.

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

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

OOCSS资源

• 面向对象的CSS
• 面向对象的CSS简介(OOCSS)
• 如何编写面向对象的CSS
• 面向对象的CSS(OOCSS)入门
• 面向对象的CSS:什么,如何以及为什么
• 潜入面向对象的CSS

Answer 5

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

如果它没有特殊含义,为什么需要将它与前面的文本分开？这段文本看起来有点奇怪,因为我无缘无故地将它用于斜体.

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

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

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