在HTML 5出来之前，我们用<div>来表示页面章节，但是这些div都没有实际意义。（即使我们用CSS样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
看下图就没有用div来布局：
上面的结构没有用div标签，用的是语义化标签（关于用哪些标签，取决于你的设计目标），但也不要因为出现了语义化标签而随意使用，错误地使用总会事与愿违。所以有些地方也是需要用div标签的，正是div标签没有任何意义，只是一个标签，用来构建结构和外观，做容器是个好的选择。
W3C定义了这些语义化标签就是让我们能够正确的使用这些标签，使网络爬虫能读懂重要的东西。
<header>标签定义一个内容块，代表整个网页或"section"的页眉，通常包括<h1>~<h6>、<hgroup>等元素，作为整个页面或一个内容块的标题，也可以包含一块目录区域nav，一个搜索框，或相关logo。
实例：
<header> <hgroup> <h1>下标题</h1> <h2>副标题</h2> </hgroup></header>整个页面没有限制<header>的个数，可以为多个，可以为每个内容块定义<header>元素。<header>使用注意：
<header>作为整个页面或"section"的页眉，或某个内容区域块。整个页面没有限制<header>的个数如果<h1>~<h6>和<hgroup>自己就能工作的很好，那就不要用<header>，减少冗余。<footer>标签
<footer>标签定义一个区域，作为整个页面或"section"的页脚（底部），通常包含整个页面或该区域的基本信息，如：作者、相关文档链接、版权信息、索引、标签、协议等。
实例：
<footer> 相关文档链接、版权信息</footer><footer>使用注意：<footer>作为整个页面或"section"的页脚。<footer>没有数量限制。<hgroup>标签
<hgroup>标签定义整个页面或"section"的标题，当标题有多个层级时，可以使用<hgroup>标签将<h1>~<h6>放入其中组合。如：文章的正标题和副标题等。
实例：
<hgroup> <h1>这是一篇介绍HTML5语义化的文章</h1> <h2>HTML5</h2></hgroup><hgroup>使用注意：<hgroup>作为整个页面或"section"的标题。如果只使用一个<h1>~<h6>就不用<hgroup>。如果连续使用多个<h1>~<h6>就用<hgroup>。如果有连续多个标题和文章数据，就用<hgroup>将<h1>~<h6>组合起来，和其它文章数据一起放入<header>中。<nav>标签
<nav>标签定义页面的导航链接部分，主要用于页面的主要导航部分。
实例：
<nav><!-- 页面的主要导航部分 --> <ul> <li>第一个链接</li> <li>第二个链接</li> <li>第三个链接</li> </ul></nav><nav>使用注意：建议<nav>只用于页面的主要导航部分，其它的有导航链接的部分用<ul>就行。若不合适用于主要导航部分，就不要用<nav>标签。<article>标签
<article>很容易与<div>、<section>混淆，它定义了在文档、页面和网站中自成一体的内容，便于开发者独立开发，例如：一篇博客文章、用户评论、论坛帖子等。
<article>中通常有自己的标题（在<header>中），也有自己的<footer>。下面例举两个例子：
一篇简单的文章：
<article> <header> <h1>一篇文章</h1> <p><time datetime="2017-01-01">2017-01-08</time><p> </header> <p>文章正文内容。。。。</p> <footer> <small>版权：HTML5所有。作者：xxx</small> </footer></article>一篇包含用户评论的文章：
<article> <!-- 整篇博客 --> <header> <!-- 博客的页眉部分 --> <h1>一篇文章的标题</h1> <p><time datetime="2017-01-01">2017-01-08</time></p> </header> <p>这是文章的正文部分。。。</p> <article> <!-- 用户评论部分 --> <h2>用户评论部分</h2> <article> <!-- 第一个用户的评论 --> <header> <h3>评论者：</h3> <p><time datetime="2017-01-01">30分钟前</time></p> </header> <p>评论的内容。。。</p> </article> <article> <!-- 第二个用户的评论 --> <header> <h3>评论者：</h3> <p><time datetime="2017-01-01">40分钟前</time></p> </header> <p>评论的内容。。。</p> </article> </article> <footer> <!-- 博客的页眉部分 --> <p><small>版权所有：归HTML5所有 作者：xxx</small></p> </footer> </article><article>中嵌套的<article>可能是用户评论，也可能是与文章相关联的部分。以下是在<article>中嵌套<section>元素：
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>details summary</title> </head> <body> <article> <!-- 整篇文章 --> <h1>前端技术</h1> <p>前端技术有哪些？</p> <section> <!-- article中的一个章节 --> <h2>HTML</h2> <p>THML是。。。</p> </section> <section> <!-- article中的一个章节 --> <h2>CSS</h2> <p>CSS是。。。</p> </section> </article> </body></html><section>部分虽然是独立的内容，但它也是组成整体的一部分，是从属关系，<article>是主体，<section>是组成这个主体的一小部分，<article>的文章内容在<section>篇章中，<section>是<article>相关的内容，这样能让浏览器更容易区分文章内容。
<article>使用注意：
本身独立用<article>与其它内容相关用<section>没有语义用<div><section>标签
<section>定义了"节"和"段"，"段"可以是一篇文章里相关主题的分段，是文章的组成部分。
如果可以用<article>、<header>、<aside>，就不要用<section>，<section>不是一般意义的容器，如果想作为样式展开就用<div>。
<aside>标签
<aside>标签定义附加信息，如果在<article>内部，则作为主要内容的附加信息，包括：标签、相关资料、名词解释等；如果在<article>外部，则作为整个页面的附加信息，包括：侧边栏、广告、其它导航等。
实例：
<article> <h1>关于aside标签的讨论</h1> <p>aside定义相关内容的附加信息。。。</p> <aside> <!-- 关于上面文章的一些附加信息 --> <h2>作者<h2> <p>红尘，前端菜鸟一枚。</p> </aside></article><aside>使用注意：<aside>在<article>内部作为主体内容的附加信息，如：作者作息、相关名词解释<aside>在<article>外部作为整个页面的附加信息，如：侧边栏、其它导航如果没有<article>与<aside>相对应，则不要用<aside>，可以用<div>
HTML5中还有其它的语义化元素，这里就不多例举了。。。
新闻热点
疑难解答
