9.2 footer元素和 group 元素

我们先看下 footer 元素：

footer 元素可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息。

我们还是具体的代码来了解 footer 的具体使用。

<!-- 这是之前的使用方式，语义化并不好 -->
    <div class="footer">
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </div>
    <!-- 这是比较好的写法 -->
    <footer>
        <ul>
                <li><a href="#">版权信息</a></li>
                <li><a href="#">站点地图</a></li>
                <li><a href="#">联系方式</a></li>
        </ul>
    </footer>

一个页面中未必只有一个 footer ，它还可以表示一个区块中的 footer，这和 header 较为相似。在真实的网站中：

标出的一块被定义为 footer。下面看下 hgroup 元素。

hgroup 元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将 h1~h6 元素进行分组，譬如一个内容区块的标题及其子元素算一组。通过代码展示一下：

<article>
        <header>
            <h1>这是标题</h1>
            <p><time datetime="2019-07-07">2019-07-07</time></p>
        </header>
        <div>
            这是内容
        </div>
        <footer>
            这是底部
        </footer>
    </article>

这里只有一个主标题，当我们想为其添加一个副标题的时候，或者我们看到的一些广告，它们会有一些子标题，我们来修改代码：

<article>
        <header>
            <hgroup>
                    <h1>这是标题</h1>
                    <h2>这是一个子标题</h2>
            </hgroup>
            <p><time datetime="2019-07-07">2019-07-07</time></p>
        </header>
        <div>
            这是内容
        </div>
        <footer>
            这是底部
        </footer>
    </article>

我们添加了一个副标题并和主标题进行了分组，这就是 hgroup 的作用。当只有一个标题的时候没必要设置 hgroup，当标题过多而且属于同一等级的时候，此时我们应该用 hgroup 将其包裹起来。