HTML5语义化

理解HTML5语义化：

HTML5的语义化指的是用正确的标签包含正确的内容，标签语义化的好处就是结构良好，便于阅读，方便威化，也有利于爬虫的查找，提高搜索率。

---

header元素

header 元素代表“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

---

footer元素

footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
    ©2017 Baidu 
    <a>使用百度前必读</a>
</footer>

---

hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
</hgroup>

注：如果只需要一个h1-h6标签就不用hgroup
   如果有连续多个h1-h6标签就用hgroup

---

nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

注：用在整个页面主要导航部分上，不合适就不要用nav元素；

---

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
    <p>内容</p>
    <aside>
        <h1>网站简介</h1>
        <p> www.baidu.com</p>
    </aside>
</article>

注： aside在article内表示主要内容的附属信息，
    在article之外则可做侧边栏，没有article与之对应，最好不用。
    如果是广告，其他日志链接或者其他分类导航也可以用

---

section元素

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

注：一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。

1.表示文档中的节或者段；
2.article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

---

article元素（特殊的section）

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p>©2017 Baidu </p>
    </footer>
</article>

每个article标签为一大章节，可以单独使用却互不干涉，独立成文；而大章节里的小章节就是section，虽然有明确的标题和正文却是附属在大章节–article正文内

<article>
    <h1>第一章</h1>
    <section>
        <h2>第一节</h2>
    </section>
    <section>
        <h2>第二节</h2>
    </section>
    <section>
        <h2>第三节</h2>
    </section>
</article>

<article>
    <h1>第二章</h1>
    <section>
        <h2>第一节</h2>
    </section>
    <section>
        <h2>第二节</h2>
    </section>
</article>