在以前的html中，我们通常会用很多的
div来给网页布局，然后给div定义有一个意义的类。这种情况一般情况下程序员是能读的的懂的，但是搜索引擎很难理解每个div到底代表什么意思。看下面的代码：
<body>
<div id="wrapper">
<!--the header -->
<div id="header">
<div id="logo"></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
</ul>
</div>
</div>
<!-- the content -->
<div id="content">
</div>
<!-- the sidebar -->
<div id="sidebar">
</div>
<!-- the footer -->
<div id="footer">
</div>
</div>
</body>
HTML5 旨在使用新增的全新语义化元素来解决这 个问题。
一. <section>标签
<section>元素用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个 人信息，一个<section>用于联系信息，另一个用于新闻动态。需要重点理解的是用它 的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以 前一样继续使用<div>。section 元素代表文档或应用的一个一般的区块。 section 是具有相似主题的一组内容， 通常 包含一个标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<section>
<h1>苹果</h1>
<p>
一种树上结的果子，很甜，有的也酸
</p>
</section>
<section>
<h1>香蕉</h1>
<p>
一种书上结果的水平，很长，很黄，女生比较喜欢吃
</p>
</section>
</body>
</html>
二. <nav>标签
<nav>元素用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区 域。因为<nav>用于主导航区域，所以严格来讲它不是为页脚或其他经常会包含一组链 接的区块而设计的（虽然将它用在这些区块里包含链接也没问题）。将一组链接指定为重要导航!
比如一个网站的最上方的主导航。
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
三. <article>标签
<article>元素表示文档、页面、 应用或网站中一个独立的容器， 原 则上是可独立分配或可再用的， 就 像聚合内容中的各部分。 它可以是 一篇论坛帖子、一篇杂志或报纸文 章、一篇博客条目、一则用户提交 的评论、一个交互式的小部件或小 工具，或者任何其他独立的内容项。
<article>元素用来包裹独立的内容片段。当搭建一个页面时，想 想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不 同的网站且能保持完整的意义？另一种办法是，想想包裹在<article>中的内容能否在 RSS 订阅源中独立成为一篇文章？应该使用<article>标签包裹的内容，最明显的例子 就是博客正文。
注意：
<article>元素与<section>元素很容易混淆。
在考虑何时使用 section 的时候， 记住定义中“具有相似主题的一组内容”这一条是 很有帮助的。 这也是 section 区别于 div 的另一个原因。
section 和 article 的区别在于， section 在本质上组织性和结构性更强，而 article 代表的是自包含的容器。
对内容进行标记时，并非总能分出对和错，只是大多数时候有正确的选择。而其他时候，就只能依靠个人对最适合描述内容的 HTML 元素的感觉了。
在考虑是否使用 section 的时候，一定要仔细思考，不过也不必每次都对是否用对感到 担心。有时，些许主观并不会影响页面正常工作。
四. <aside>标签
<aside>元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边 栏（当它包含合适的内容时）。另外，引文、广告以及导航元素（如友情链接等）也可以 使用它。
五. <header>标签
标签:<header>
如果页面中有一块包含一组介绍性或导 航性内容的区域， 应该用
header元素对其进 行标记。一个页面可以有任意数量的
header元 素， 它们的含义可以根据其上下文而有所不 同。 例如， 处于页面顶端或接近这个位置的header可能代表整个页面的页眉（有时称为 页头）通常，页眉包括网 站标志、主导航和其他全站链接， 甚至搜索框。这无疑是
header元 素最常见的使用形式。
六. <footer>标签
当你想到页脚的时候， 你大概想的是页 面底部的页脚（通常包括版权声明， 可能还 包括指向隐私政策页面的链接以及其他类似 的内容）。
HTML5的footer元素可以用在 这样的地方， 但它同header一样， 还可以用 在其他的地方。
footer元素代表嵌套它的最近的article 、aside 、 blockquote 、 body 、 details 、 fieldset 、 figure 、 nav 、 section 或 td 元 素 的页脚。 只有当它最近的祖先是body时， 它才是 整个 页面的页脚。
