在HTML 5出来之前，我们用<div>来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
看下图就没有用div来布局：
上面的结构没有用div标签，用的是语义化标签（关于用哪些标签，取决于你的设计目标），但也不要因为出现了语义化标签而随意使用，错误地使用总会事与愿违。所以有些地方也是需要用div标签的，正是div标签没有任何意义，只是一个标签，用来构建结构和外观，做容器是个好的选择。
W3C定义了这些语义化标签就是让我们能够正确的使用这些标签，使网络爬虫能读懂重要的东西。
<header>标签
<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中还有其它的语义化元素，这里就不多例举了。。。
3938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
