HTML5 结构之美(3) - 结构标签综合运用
前面我们介绍了在 HTML5 中新增的结构标签，以及这些标签的定义和使用方法。接下来，让我们看一下在 HTML5 中进行总体页面布局的时候，具体应该怎样来综合运用这些结构标签。
大纲
通过使用新的结构标签，HTML5 的文档结构比大量使用 div 标签的 HTML4 的文档结构要清晰、明确了很多。如果再规划好文档结构的大纲，就可以创建出对阅读者或屏幕阅读程序来说，都很清晰易读的文档结构。
所谓大纲，简单来说就是文档中各内容区块的结构编排。内容区块可以使用标题标签(h1~h6)来展示各级内容区块的标题。综合运用各级内容区块的标题创建好文档的目录后，该目录就是一个大纲了。
关于内容区块的编排，可以分为“显示编排”与“隐式编排”两种方式。
1、显示编排内容区块
显示编排是指明确使用 section 等标签创建文档结构，在每个内容区块内使用标题（h1~16、hgroup等），如下代码所示：
<body> <h1>网页级内容区块标题</h1> <p>网页级内容区块的正文</p> <section> <h2>section 级内容区块的标题</h2> <p>section 级内容区块的正文</p> </section> </body>
2、隐式编排内容区块
所谓隐式编排，是指不明确使用 section 等标签，而是根据页面中所书写的各级标题（h1~h6、hgroup）等把内容区块自动创建出来。因为 HTML5 分析器只要看到书写了某个级别的标题，就会判断存在相对于的内容区块。以下代码为一个隐式编排内容区块的示例：
<body> <h1>网页级内容区块标题</h1> <p>网页级内容区块的正文</p> <!--分析器根据 h2 等标签判断生成内容区块--> <h2>section 级内容区块的标题</h2> <p>section 级内容区块的正文</p> </body>
将这两种编排方式进行对比、很明显，显示编排更加清晰、异度。
3、标题分级
不同的标题有不同的级别，h1 的级别最高，h6 的级别最低。隐式编排时如下规则自动生成内容区块：
如果新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。
第一条规则的示例与前面一样，现在我们来看关于第二条规则的示例：
<body> <section> <h2>section 级别的内容区块的标题</h2> <p>section 级别的内容区块的正文</p> <!--因为下面的标题级别比上一个标题级别高，所以自动创建新的内容区块--> <h1>新的 section 级别的内容区块的标题</h1> <p>新的 section 级别的内容区块的正文</p> </section> </body>
如果把上一个示例改成显示编排，如下代码所示：
<body> <section> <h2>section 级别的内容区块的标题</h2> <p>section 级别的内容区块的正文</p> </section> <section> <h1>新的 section 级别的内容区块的标题</h1> <p>新的 section 级别的内容区块的正文</p> </section> </body>
4、不同的内容区块可以使用相同级别的标题
另外，不同的内容区块可以使用相同级别的标题。例如，父内容区块与子内容区块可以使用相同级别的h1。这样做的好处是：每个级别的标题都可以单独设计，如果既需要“整个网页的标题”，又需要“文章的标题”，这样做将会带来很大的便利性，如下代码所示：
<body> <h1>网页的标题</h1> <article> <header> <hgroup> <h1>文章标题</h1> <h2>文章子标题</h2> </hgroup> </header> <p>文章正文</p> </article> </body>
综合示例
基于前面提到的知识点，让我们通过一个示例来看应该怎样排版网页的内容，以下代码为一个标准博客网页的示例，在这个示例中，具备了一个标准博客网页所具备的基本要素。
<!DOCTYPE html> <html> <head> <title>网页编排示例</title> <meta charset="utf-8" /> </head> <body> <!-- 头部 --> <header> <!-- 网页标题 --> <h1>网页标题</h1> <!-- 导航链接 --> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="help.html">帮助</a></li> </ul> </nav> </header> <!-- 文章 --> <article> <!-- 文章标题 --> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <!-- 文章正文 --> <p>文章正文。。。</p> <!-- 文章评论 --> <section class="comments"> <article> <h5>评论标题</h5> <p>评论正文</p> </article> </section> </article> <!-- 版权 --> <footer> <p>版权所有：XXX</p> </footer> </body> </html>
在这个示例中，使用了嵌套 article 标签的方式，将关于评论的 article 标签嵌套在了主 article 标签中，在 HTML5 中，推荐使用这种方式。
