3.2 描述性文本
HTML5强化了字体标签的语义性，弱化了其修饰性，对于纯样式字体标签就不再建议使用，如acronym（首字母缩写）、basefont（基本字体样式）、center（居中对齐）、font（字体样式）、s（删除线）、strike（删除线）、tt（打印机字体）、u（下画线）、xmp（预格式）等。
3.2.1 强调文本
strong元素表示内容的重要性，而em则表示内容的着重点。根据内容需要，这两个元素既可以单独使用，也可以一起使用。
【示例1】在下面代码中既有strong，又有em。浏览器通常将strong文本以粗体显示，而将em文本以斜体显示。如果em是strong的子元素，将同时以斜体和粗体显示文本。
<p><strong>警告：不要接近展品<em>在任何情况下</em></strong></p>
不要使用b元素代替strong，也不要使用i元素代替em。尽管它们在浏览器中显示的样式是一样的，但是它们的含义却很不一样。
em在句子中的位置会影响句子的含义。例如，“<p><em>你</em>看着我</p>”和“<p>你看着<em>我</em></p>”表达的意思是不一样的。
【示例2】可以在标记为strong的短语中再嵌套strong文本。如果这样做，作为另一个strong的子元素的strong文本的重要程度会递增。这种规则对嵌套在另一个em里的em文本也适用。
<p><strong>记住密码是<strong>111222333</strong></strong></p>
其中“111222333”文本要比其他strong文本更为重要。
可以使用CSS将任何文本变为粗体或斜体，也可以覆盖strong和em等元素的浏览器默认显示样式。
注意：在旧版本的HTML中，strong所表示文本的强调程度比em表示的文本要高。不过，在HTML5中，em是表示强调的唯一元素，而strong表示的则是重要程度。
3.2.2 标记细则
HTML5重新定义了small元素，由通用展示性元素变为更具体的、专门用来标识所谓“小字印刷体”的元素，通常表示细则一类的旁注，如免责声明、注意事项、法律限制、版权信息等。有时还可以用来表示署名、许可要求等。
注意：small不允许被应用在页面主内容中，只允许被当作辅助信息以inline方式内嵌在页面上。同时，small元素也不意味着元素中内容字体会变小，要将字体变小，需要配合使用CSS样式。
【示例1】small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。
一些浏览器会将small包含的文本显示为小字号。不过，一定要在符合内容语义的情况下使用该元素，而不是为了减小字号而使用。
【示例2】在本示例中，第1个small元素表示简短的提示声明，第2个small元素表示包含在页面级footer里的版权声明，这是一种常见的用法。
small只适用于短语，因此不要用它标记长的法律声明，如“使用条款”和“隐私政策”页面。根据需要，应该用段落或其他语义标签标记这些内容。
提示：HTML5还支持big元素，用来定义大号字体。<big>标签包含的文字字体比周围的文字要大一号，如果文字已经是最大号字体，则<big>标签将不起任何作用。用户可以嵌套使用<big>标签逐步放大文本，每一个<big>标签都可以使字体大一号，直到上限7号文本。
3.2.3 特殊格式
b和i元素是早期HTML遗留下来的元素，它们分别用于将文本变为粗体和斜体，因为那时候CSS还未出现。HTML4和XHTML1开始不再使用，因为它们本质上是用于表现的。
当时的规范建议编码人员用strong替代b，用em替代i。不过，事实证明，em和strong有时在语义上并不合适。为此，HTML5重新定义了b和i。
传统出版业里的某些排版规则在现有的HTML语义中还找不到对应物，其中就包括用斜体表示植物学名、具体的交通工具名称及外来语。这些词语不是为了强调而使用斜体的，只是样式上的惯例。
为了应对这些情况，HTML5没有创建一些新的语义化元素，而是采取了一种很实际的做法：直接利用现有元素。em用于所有层次的强调，strong用于表示重要性，而其他情况则使用b和i。
这意味着，尽管b和i并不包含任何明显的语义，但浏览者仍能发现它们与周边文字的差别。而且还可以通过CSS改变它们粗体或斜体的样式。HTML5强调，b和i应该是其他元素（如strong、em、cite等）都不适用时的最后选择。
b元素。
HTML5将b重新定义为表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。例如：
<p>这是一个<b>红</b>房子，那是一个<b>蓝</b>盒子</p>
b文本默认显示为粗体。
i元素。
HTML5将i重新定义为：表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等。例如：
<p>这块<i class="taxonomy">玛瑙</i>来自西亚</p>
<p>这篇<i>散文</i>已经发表.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
i文本默认显示为斜体。
3.2.4 定义上标和下标
使用sup和sub元素可以创建上标和下标，上标和下标文本比主体文本稍高或稍低。常见的上标包括商标符号、指数和脚注编号等；常见的下标包括化学符号等。例如：
<p>这段文本包含 <sub>下标文本</sub></p>
<p>这段文本包含 <sup>上标文本</sup></p>
【示例1】sup元素的一种用法就是表示脚注编号。根据从属关系，将脚注放在article的footer里，而不是整个页面的footer里。
为文章中每个脚注编号创建了链接，指向footer内对应的脚注，从而让访问者更容易找到它们。同时，注意链接中的title属性也提供了一些提示。
上标是对某些外语缩写词进行格式化的理想方式，例如法语中用Mlle表示Mademoiselle（小姐），西班牙语中用3a表示tercera（第三）。此外，一些数字形式也要用到上标，如2nd、5th。下标适用于化学分子式，如H2O。
提示：sub和sup元素会轻微地增大行高。不过使用CSS可以修复这个问题。修复样式代码如下。
用户还可以根据内容的字号对这个CSS做一些调整，使各行行高保持一致。
【示例2】对于下面数学解题演示的段落文本，使用格式化语义结构能够很好地解决数学公式中各种特殊格式的要求。对于计算机来说，也能够很好地理解它们的用途，效果如图3.1所示。
图3.1 格式化文本的语义结构效果
在上面代码中，使用i元素定义变量x以斜体显示；使用sup定义二元一次方程中二次方；使用b加粗显示常量值；使用big和b加大加粗显示“分解因式法”这个短语；使用small缩写操作谓词“由”和“得”的字体大小；使用sub定义方程的两个解的下标。
3.2.5 定义术语
在HTML中定义术语时，可以使用dfn元素对其做语义上的区分。例如：
通常，dfn元素默认以斜体显示。由dfn标记的术语与其定义的距离相当重要。如HTML5规范所述：“如果一个段落、描述列表或区块是某dfn元素距离最近的祖先，那么该段落、描述列表或区块必须包含该术语的定义。”简言之，dfn元素及其定义必须挨在一起，否则便是错误的用法。
【示例】在描述列表（dl元素）中使用dfn。
仅在定义术语时使用dfn，而不能为了让文字以斜体显示就使用该元素。使用CSS可以将任何文字变为斜体。
dfn可以在适当的情况下包住其他的短语元素，如abbr。例如：
<p><dfn><abbr title="Junior">Jr.</abbr></dfn>他儿子的名字和他父亲的名字一样吗？</p>
如果在dfn中添加可选的title属性，其值应与dfn术语一致。如果只在dfn里嵌套一个单独的abbr，dfn本身没有文本，那么可选的title只能出现在abbr里。
3.2.6 标记代码
使用code元素可以标记代码或文件名。例如：
<code>
p{ margin:2em; }
</code>
如果代码需要显示“<”或“>”字符，应分别使用<和>表示。如果直接使用“<”或“>”字符，浏览器会将这些代码当作HTML元素处理，而不是当作文本处理。
要显示单独的一块代码，可以用pre元素包住code元素以维持其格式。例如：
【拓展】
其他计算机相关元素包括kbd、samp和var。这些元素极少使用，不过可能会在内容中用到它们。下面对它们做简要说明。
kbd元素。
使用kbd标记用户输入指示。例如：
与code一样，kbd默认以等宽字体显示。
samp元素。
samp元素用于指示程序或系统的示例输出。例如：
<p>一旦在浏览器中预览，则显示<samp>Hello,World</samp></p>
samp也默认以等宽字体显示。
var元素。
var元素表示变量或占位符的值。例如：
<p>爱因斯坦称为是最好的<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
var也可以作为内容中占位符的值，例如，在填词游戏的答题纸上可以放入<var>adjective</var>,<var>verb</var>。
var默认以斜体显示。注意，可以在HTML5页面中使用math等MathML元素表示高级的数学相关的标记。
tt元素。
tt元素表示打印机字体。
3.2.7 预定义格式
使用pre元素可以定义预定义文本，是计算机代码示例的理想元素。预定义文本就是可以保持文本固有的换行和空格。例如：
对于包含重要的空格和换行的文本（如这里显示的CSS代码），pre元素是非常适合的。同时要注意code元素的使用，该元素可以标记pre外面的代码块或与代码有关的文本。
预定义文本通常以等宽字体显示，可以使用CSS改变字体样式。如果要显示包含HTML元素的内容，应将包围元素名称的“<”和“>”分别改为其对应的字符实体<和>。否则，浏览器就会试着显示这些元素。
一定要对页面进行验证，检查是否在pre中嵌套了HTML元素。不要将pre作为逃避以合适的语义标记内容和用CSS控制样式的快捷方式。例如，如果想发布一篇在字处理软件中写好的文章，不要为了保留原来的格式，简单地将它复制、粘贴到pre里。相反，应该使用p元素，以及其他相关的文本元素标记内容，编写CSS控制页面的布局。
同段落一样，pre默认从新一行开始显示，浏览器通常会对pre里面的内容关闭自动换行，因此，如果这些内容很宽，就会影响页面的布局，或产生横向滚动条。
提示：使用下面CSS样式可以对pre包含内容打开自动换行，但在IE 7及以下版本中并不适用。
在大多数情况下不推荐对div等元素使用white-space:pre以代替pre，因为空格可能对这些内容（尤其是代码）的语义非常重要，而只有pre才能始终保留这些空格。同时，如果用户在其浏览器中关闭了CSS，格式就丢失了。
3.2.8 定义缩写词
使用abbr元素可以标记缩写词并解释其含义。当然不必对每个缩写词都使用abbr，只在需要帮助访问者了解该词含义时使用。例如：
<abbr title=" HyperText Markup Language">HTML</abbr>是一门标识语言。
使用可选的title属性提供缩写词的全称。另外，也可以将全称放在缩写词后面的括号里（这样做更好）。还可以同时使用这两种方式，并使用一致的全称。如果大多数人都很熟悉了，就没有必要对它们使用abbr，并提供title，这里只是用它们来演示示例。
通常，仅在缩写词第一次出现在屏幕上时，通过title或括号的方式给出其全称。用括号提供缩写词的全称是解释缩写词最直接的方式，能让尽可能多的访问者看到这些内容。例如，使用智能手机和平板电脑等触摸屏设备的用户可能无法移到abbr元素上查看title的提示框。因此，如果要提供缩写词的全称，应该尽量将它放在括号里。
如果使用复数形式的缩写词，全称也要使用复数形式。作为对用户的视觉提示，Firefox和Opera等浏览器会对带title的abbr文字使用虚线下画线。如果希望在其他浏览器中也这样显示，可以在样式表中加上下面样式。
abbr[title] { border-bottom: 1px dotted #000; }
无论abbr是否添加了下画线样式，浏览器都会将title属性内容以提示框的形式显示出来。如果看不到abbr有虚线下画线，试着为其父元素的CSS添加line-height属性。
提示：在HTML5之前有acronym（首字母缩写词）元素，但设计和开发人员常常分不清楚缩写词和首字母缩写词，因此HTML5废除了acronym元素，让abbr适用于所有的场合。
当访问者将鼠标移至abbr上，该元素title属性的内容就会显示在一个提示框里。在默认情况下，Chrome等一些浏览器不会让带有title属性的缩写词与普通文本有任何显示上的差别。
3.2.9 标注编辑或不用文本
有时可能需要将在前一个版本之后对页面内容的编辑标出来，或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素：代表添加内容的ins元素和标记已删除内容的del元素。这两个元素既可以单独使用，也可以一起使用。
【示例1】在下面列表中，上一次发布之后，又增加了一个条目，同时根据del元素的标注，移除了一些条目。使用ins时不一定要使用del，反之亦然。浏览器通常会让它们看起来与普通文本不一样。同时，s元素用以标注不再准确或不再相关的内容（一般不用于标注编辑内容）。
浏览器通常对已删除的文本加上删除线，对插入的文本加上下画线。可以用CSS修改这些样式。
【示例2】del和ins是少有的既可以包围短语内容（HTML5之前称“行内元素”），又可以包围块级内容的元素。
del和ins都支持两个属性：cite和datetime。cite属性（区别于cite元素）用于提供一个URL，指向说明编辑原因的页面。
【示例3】del与ins两个元素的显示效果如图3.2所示。
图3.2 插入和删除信息的语义结构效果
datetime属性提供编辑的时间。浏览器不会将这两个属性的值显示出来，因此它们的使用并不广泛。不过，应该尽量包含它们，从而为内容提供一些背景信息。它们的值可以通过JavaScript或分析页面的程序提取出来。
如果需要向访问者展示内容变化情况，可以使用del和ins。例如，经常可以看见一些站点使用它们表示初次发布后的更新信息，这样可以保持原始信息的完整性。
使用ins标记的文本通常会显示一条下画线。由于链接通常也以下画线表示，这可能会让访
问者感到困惑。可以使用CSS改变插入的段落文本的样式。
使用del标记的文本通常会显示一条删除线。加上删除线以后，用户就很容易看出修改了什么。
提示：HTML5指出：s元素不适用于指示文档的编辑，要标记文档中一块已移除的文本，应使用del元素。有时，这之间的差异是很微妙的，只能由个人决定哪种选择更符合内容的语义。仅在有语义价值时使用del、ins和s。如果只是出于装饰目的要给文字添加下画线或删除线，可以用CSS实现这些效果。
3.2.10 指明引用或参考
使用cite元素可以定义作品的标题，以指明对某内容源的引用或参考。例如戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会或音乐会，规范、报纸或法律文件等。
【示例】在本示例中，cite元素标记的是音乐专辑、电影、图书和艺术作品的标题。
<p>他正在看<cite>红楼梦</cite></p>
提示，对于要从引用来源中引述内容的情况，使用blockquote或q元素标记引述的文本。要弄清楚的是，cite只用于参考源本身，而不是从中引述的内容。
注意：HTML5声明，不应使用cite作为对人名的引用，但HTML以前的版本允许这样做，而且很多设计和开发人员仍在这样做。HTML4的规范有以下例子。
<cite>鲁迅</cite>说过：<q>世上本没有路，走的人多了，也便成了路.</q>
除了这些例子，有的网站经常用cite标记在博客和文章中发表评论的访问者的名字（WordPress的默认主题就是这样做的）。很多开发人员表示他们将继续对与页面中的引文有关的名称使用cite，因为HTML5没有提供他们认为可接受的其他元素（即span和b元素）。
3.2.11 引述文本
blockquote元素表示单独存在的引述（通常很长），它默认显示在新的一行。而q元素则用于较短的引述，如句子里面的引述。例如：
如果要添加署名，署名应该放在blockquote外面。可以把署名放在p里面，不过使用figure和figcaption可以更好地将引述文本与其来源关联起来。如果blockquote中仅包含一个单独的段落或短语，可以不必将其包在p中再放入blockquote。
浏览器应对q元素中的文本自动加上特定语言的引号，但不同浏览器的效果并不相同。
浏览器默认对blockquote文本进行缩进，cite属性的值则不会显示出来。不过，所有的浏览器都支持cite元素，通常对其中的文本以斜体显示。
【示例】下面这个结构综合展示了cite、q和blockquote元素以及cite引文属性的用法，演示效果如图3.3所示。
图3.3 引用信息的语义结构效果
提示：可以对blockquote和q使用可选的cite属性，提供引述内容来源的URL。尽管浏览器通常不会将cite的URL呈现给用户，但理论上讲，该属性对搜索引擎或其他收集引述文本及其引用的自动化工具来说还是有用的。如果要让访问者看到这个URL，可以在内容中使用链接（a元素）重复这个URL。也可以使用JavaScript将cite的值暴露出来，但这样做的效果稍差一些。
q元素引用的内容不能跨越不同的段落，在这种情况下应使用blockquote。不要仅仅因为需要在字词两端添加引号就使用q元素。
blockquote和q元素可以嵌套。嵌套的q元素应该自动加上正确的引号。由于内外引号在不同语言中的处理方式不一样，因此要根据需要在q元素中加上lang属性。不同浏览器对嵌套q元素的支持程度并不相同，其实浏览器对非嵌套q元素的支持也不同。由于q元素的跨浏览器问题，很多开发人员避免使用q元素，而是选择直接输入正确的引号或使用字符实体。
3.2.12 换行显示
使用br元素可以实现文本换行显示。要确保使用br是最后的选择，因为该元素将表现样式带入了HTML，而不是让所有的表现样式都交由CSS控制。例如，不要使用br模拟段落之间的距离，相反，应该用p标记两个段落并通过CSS的margin属性规定两段之间的距离。
那么，什么时候该用br呢？实际上，对于诗歌、街道地址等应该紧挨着出现的短行，都适合用br元素。例如：
<p>北京市<br />
海淀区<br />
北京大学<br />
32号楼</p>
每个br元素强制让接下来的内容在新的一行显示。如果没有br元素，整个地址都会显示在同一行，除非浏览器窗口太窄导致内容换行。可以使用CSS控制段落中的行间距以及段落之间的距离。在HTML5中，输入<br/>或<br>都是有效的。
提示：hCard微格式（http://microformats.org/wiki/hcard）是用于表示人、公司、组织和地点的人类和机器都可读的语义形式。可以使用微格式替代上面示例中表示地址的格式。
3.2.13 修饰文本
span元素是没有任何语义的行内容器，适合包围字词或短语内容，而div适合包含块级内容。如果想将下面列出的项目应用到某一小块内容，而HTML又没有提供合适的语义化元素，就可以使用span，具体内容如下。
属性，如class、dir、id、lang、title等。
CSS样式。
JavaScript行为。
由于span没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。例如：
<style type="text/css">
.red { color: red; }
</style>
<p><span class="red">HTML</span>是通向Web技术世界的钥匙。</p>
在上面示例中，想对一小块文字指定不同的颜色，但从句子的上下文看，没有一个语义上适合HTML元素，因此额外添加了span元素定义一个类样式。
span没有任何默认格式，但就像其他HTML元素一样，可以用CSS添加你自己的样式。可以对一个span元素同时添加class和id属性，但通常只应用这两个中的一个（如果真要添加的话）。主要区别在于，class用于一组元素，而id用于标识页面中单独的、唯一的元素。
在HTML没有提供合适的语义化元素时，微格式经常使用span为内容添加语义化类名，以填补语义上的空白。要了解更多信息，可以参考以下网址：http://microformats.org。
3.2.14 非文本注解
与b、i、s和small一样，HTML5重新定义了u元素，使之不再是无语义的、用于表现的元素。以前，u元素用来为文本添加下画线。现在，u元素用于非文本注解。HTML5对它的定义为：u元素为一块文字添加明显的非文本注解，如在中文中将文本标为专有名词（即中文的专名号①），或者标明文本拼写有误。例如：
<p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p>
class完全是可选的，它的值（可以是任何内容）也不会在内容中明显指出这是个拼写错误。不过，可以用它对拼错的词添加不同于普通文本的样式（u默认仍以下画线显示）。通过title属性可以为该元素包含的内容添加注释。
仅在cite、em、mark等其他元素语义上不合适的情况下使用u元素。同时，最好改变u文本的样式，以免与同样默认添加下画线的链接文本混淆。