什么是语义化？

简单说来就是让机器可以读懂内容。

语义化的优点：

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO
去掉或样式丢失的时候能让页面呈现清晰的结构。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

PS:一般的爬虫框架流程为----从互联网海量页面中先抓取一些高质量页面，抽取其中所包含的url，将这些URL放入待抓取队列中，爬虫依次读取该队列中的url，通过DNS解析，将这些url转化成对应网站的IP地址，网页下载器则通过IP地址下载页面所有内容。

html5语义化标签

123

header元素

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

整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

<header>
    <hgroup>
        <h1>xxx</h1>
    </hgroup>
    <nav></nav>
</header>

footer元素

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

<footer>
    Copyright © 2017 ...
</footer>

nav元素

nav元素代表页面的导航链接区域，用在整个页面主要导航部分上，不合适就不要用nav元素

<nav>
    <ul>
        <li>首页</li>
        <li>xxx</li>
        ...
    </ul>
</nav>

section元素

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

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

article元素

article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。并不是说只有是文章内容才能使用，而是说只要是自成一体的内容就可以用这个标签（特殊的section）

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权：html5jscss网所属，作者：小北</small></p>
    </footer>
</article>

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小北，前端一枚</p>
    </aside>
</article>

使用注意：

自身独立的情况下：用article——是一个独立的内容
是相关内容：用section----它是一个部分，可以是一个大部分，也可以是一个小部分
没有语义的：用div

参考地址：

Html5语义化标签