第2章 —— HTML 5 的结构

在HTML 5对HTML 4所做的各方面修改中，一个比较重大的修改就是为了使文档结构更加的清晰明确，容易阅读，增加了很多新的结构元素。

（1） 新增的主题结构元素

1. article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一片论坛体诶、一段用户评论或一个独立的插件。

除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里）。

 <article>
        <header>
            <h1>苹果</h1>
            <p>发表日期：<time>2016-10-29</time></p>
        </header>
        <p><b>苹果</b>,植物类水果</p>
        <footer>
            <p><small>著作权归罗浩然公司所有。</small></p>
        </footer>
    </article>

2. section元素

section元素用来对网站或应用程序中页面上的内容进行分块，一个section元素通常有内容和标题组成。但section并非是一个普通的容器元素。当一个容器需要直接定义样式或通过脚本定义行为是，推荐使用div。

我们也可以这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中。

通常不推荐为那些没有标题的内容使用section元素。

我们来看看section和article的区别和联系：

<article>

        <h1>苹果</h1>

        <section>
            <h2>红富士</h2>
            <p>红富士是容普通富士..</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>国光苹果，又名小国光...</p>
        </section>
    </article>

该文章每一个部分都有一个独立的标题，因此使用了两个section元素。

在HTML 5中，article元素可以看做成特殊的section元素，它比section元素更加强调独立性。section强调分段或者分块。具体来说，如果一段内容比较完整、独立的时候，使用article。而将一块内容分为几块的时候，用section元素进行分段。

3. nav元素

nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

4. aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

① 包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。

② 在article之外使用，作为页面或站点全局的附属信息部分。

（2） 新增的非主体结构元素

1. header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容。

需要强调的一点是，一个页面不限制只有一个header元素。你可以为每一个内容区域加上一个header。

在HTML5中，一个header元素通常至少要包含一个heading（h1~h6），也可以包括hgroup元素，还可以包含nav。

2. footer元素

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

3. address元素

address元素用来在文档中呈现联系信息。address应该不只是用来呈现电子邮箱或真实地址，还可以用来展示跟文档相关的联系人的所有联系信息。

4. main元素

main元素表示展示网页中的主要内容。

每个网页内部只能放置一个main元素。不能将main元素放在任何article、aside、footer、header或者nav元素内部。