3.1 结构化文本
设计符合语义的结构会增强信息可读性和扩展性，同时也降低了结构的维护成本，为跨平台信息交流和阅读打下基础。
3.1.1 定义标题文本
视频讲解
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签可定义标题，按级别高低从大到小分别为h1、h2、h3、h4、h5、h6，它们包含的信息依据重要性逐渐递减。其中h1表示最重要的信息，而h6表示最次要的信息。
【示例1】在网页中，标题信息比正文信息重要，因为不仅浏览者要看标题，搜索引擎也同样要先检索标题。下面的做法是不妥的，用户应使用CSS样式来设计显示效果。
<div id="header1">一级标题</div>
<div id="header2">二级标题</div>
<div id="header3">三级标题</div>
【示例2】很多用户在选用标题元素时不规范，不讲究网页结构的层次轻重，如图3.1所示。
图3.1 标题与正文的信息重要性比较
在一个节段中，h1元素被重复使用了3次，显然是不合适的。
【示例3】下面示例中层次清晰、语义合理的结构对于阅读者和机器来说都是很友好的。除了h1元素外，h2、h3和h4等标题元素在一篇文档中可以重复使用多次。但是如果把h2作为网页副标题之后，应该只能够使用一次，因为网页的副标题只有一个。
h1、h2和h3元素比较常用，h4、h5和h6元素不是很常用，除非在结构层级比较深的文档中才会考虑选用，因为一般文档的标题层次在三级左右。
对于标题元素的位置，应该出现在正文内容的顶部，一般置于第一行的位置。
3.1.2 定义段落文本
视频讲解
<p>标签定义段落文本，在段落文本前后会创建一定距离的空白，浏览器会自动添加这些空间，用户可以根据需要使用CSS重置这些样式。
注意：传统用户习惯使用<div>或<br>标签来分段文本，这样会带来歧义，妨碍搜索引擎对信息的检索。
【示例】下面代码使用语义化的元素构建文章的结构。其中使用div元素定义文章包含框，使用h1定义文章标题，使用h2定义文章的作者，使用p定义段落文本，使用cite定义转载地址。所显示的结构效果如图3.2所示。
图3.2 文档结构图效果
3.1.3 定义引用文本
视频讲解
<q>标签定义短的引用，浏览器经常在引用的内容周围添加引号；<blockquote>标签定义块引用，其包含的所有文本都会从常规文本中分离出来，左、右两侧会缩进显示，有时会显示为斜体。
从语义角度分析，<q>标签与<blockquote>标签是一样的。不同之处在于它们的显示和应用。<q>标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分，应使用<blockquote>标签。
提示：一段文本不可以直接放在blockquote元素中，应包含在一个块元素中，如p元素。
<q>标签包含一个cite属性，该属性定义引用的出处或来源。<blockquote>标签也包含一个cite属性，定义引用的来源URL。
<cite>标签定义参考文献的引用，如书籍或杂志的标题，引用的文本将以斜体显示。常与<a>标签配合使用，定义一个超链接指向参考文的联机版本。
<cite>标签还有一个隐藏的功能：从文档中自动摘录参考书目。浏览器能够根据它自动整理引用表格，并把它们作为脚注，或者独立的文档来显示。
【示例】下面这个结构综合展示了cite、q和blockquote元素以及cite引文属性的用法，演示效果如图3.3所示。
图3.3 引用信息的语义结构效果