html中的文本语义标签

html的标签根据其语义划分为9种类型，其中之一是文本语义标签。

顾名思义，这类标签是用来处理文本(短语内容)的，它们的内容虽然都是文本，但语义是不同的。

这样的标签有29个：

span、a、rt、rp、dfn、abbr、q、cite、em、time、var、samp、i、b、sub、sup、small、strong、mark、ruby、ins、del、bdi、bdo、s、kbd、wbr、code、u

它们的语义如下：

• span：短语内容的通用行内容器，并没有任何特殊语义
• a：超链接
• rt：包含字符的发音，这个标签始终在ruby标签中使用
• rp：为那些不能使用ruby标签展示ruby注解的浏览器，提供随后的圆括号
• dfn：表示术语的一个定义
• abbr：表示缩写
• q：表示封闭的并且是短的行内引用的文本
• cite：表示一个作品的引用，且必须包含作品的标题
• em：标记出需要用户着重阅读的内容
• time：表示24小时制时间或者公历日期
• var：表示数学表达式或编程上下文中的变量名称
• samp：用于标识计算机程序输出
• i：用于表现因某些原因需要区分普通文本的一系列文本，例如技术术语、外文短语或小说中人物的思想活动
• b：用于吸引读者的注意到该标签的内容上
• sub：与主要的文本相比，应该展示的更低并且更小
• sup：与主要的文本相比，应该展示的更高并且更小
• small：将文本的字体变小一号，除了样式含义，也表示边注释和附属细则，包括版权和法律文本
• strong：表示文本十分重要，一般用粗体显示
• mark：为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的
• ruby：用来展示东亚文字注音或字符注释
• ins：定义已经被插入(添加到)文档中的文本
• del：表示一些被从文档中删除的文字内容。ins标签的作用恰恰与此相反：表示文档中添加的内容
• bdi：将其包含的文本与周围的文本隔离
• bdo：改写了文本的方向性，使文本以不同的方向渲染呈现出来
• s：表示不再相关，或者不再准确的事情
• kbd：表示用于键盘输入
• wbr：一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行
• code：呈现一段计算机代码
• u：表示行内文本拥有一个非文本形式的注释，该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线

文本语义标签在样式上很多都是一样的，应该根据具体的使用场景(语义)来进行选择使用标签而不是样式。但是它们的语义也很容易混淆不清，开发者常常容易在几种相似的标签之间难以抉择。

这里整理了一些使用经验：

1. span 标签应该在没有更合适的语义标签时才使用。
2. i 标签应该在没有更合适的语义标签时才使用。
3. b 标签应该在没有更合适的语义标签时才使用。如果不是出于语义目的而使用b标签，那么让文本显示粗体更好的方式是使用将CSS的font-weight的属性设置为bold。b标签的使用场景有：摘要中的关键字、评论中的产品名称或其他典型的应该加粗显示的文字。不要将b标签与strong、em或mark混淆，b标签不传达以上标签的特殊语义信息。
4. q 标签是用来引用短的文本，所以不要引入换行符，对于长的文本的引用应该使用blockquote(属于分组内容标签)。
5. cite 标签的适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。
6. em 标签可以嵌套使用，嵌套层次越深，则其包含的内容被认定为越重要着重阅读。strong标签同理。
7. sub 标签应该只用于排版目的，也就是改变文本的位置会改变含义,例如数学中或者化学符号(H₂O)。这个标签不能用于样式上的目的，这时应该使用CSS样式vertical-align属性的sub值能实现同样的效果。
8. sup 标签应该只用于排版目的，也就是改变文本的位置会改变含义,例如数学中或者在法语缩写中。这个标签不能用于样式上的目的，这时应该使用CSS样式vertical-align属性的sup值能实现同样的效果。
9. bdi 标签在当网站动态插入一些文本且不知道所插入文本的方向性时，特别有用。
10. 尽管small、b、i 标签被认为违反了结构和样式分离的原则，但在html5中是允许使用的。请自行判断使用它们还是CSS。
11. 很多时候，可以组合使用标签来加强语义。比如可以将abbr与dfn配合使用来建立缩写或首字母缩略词的定义：

 <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a markup language used to create the semantics and structure of a web page

容易混淆的标签：

• i vs. em

它们都对文字斜体化，em标签表示其内容的着重强调，而 i 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。

• b vs. strong

strong是一个逻辑状态，而b是一个物理状态。使用strong呈现出的表现形式不同于单纯的加粗。b是一个物理状态，它没有区分表现形式和内容。如果让b做了加粗文本以外的其他任何事情，都将会令人困惑而且也不符合逻辑。b还有其他用途，比如想单纯地吸引注意而不增加其重要性。

• em vs. strong

em标签用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜),strong用来对一个句子的部分增加重要性(比如，"警告！这非常危险")。

• mark vs. strong

strong标签是用来表示文本在上下文的重要性的，而mark标签是用来表示上下文关联性的。

• s vs. del

如果数据已经删除了，用del，否则用s。