HTML5 结构之美(3) - 结构标签综合运用

浏览数：45 / 时间：2015年06月09日

前面我们介绍了在 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>