在以前，网页内容的结构都是用 <div> 标签还有标题标签（h1-h6）来定义，我们尽量使用合理的标签配合一些有合理的 id 或者 class 来标记网页的不同部分的内容，让网页的结构更有意义一些。
现在，你可以使用 HTML5 的新标签来标记网页的内容，比如 <article> <section> <nav> <header> <footer>…
为什么要使用语义结构
使用这些新的标签来标记内容，对于普通的用户来说，外观上跟使用 <div> 标签是没什么区别的，然于对于搜索引擎，或使用屏幕阅读器的用户来说就不一样了，因为他们只能通过网页的标签来判断网页的内容和结构，使用语义结构可以让他们更容易读懂并理解你的网页。
理解什么是语义结构
每一张网页都有一个纲要，有点像是网页的目录，这个纲要就是网页的结构。比如一张越野车评测的网页可能像下面这样：
<div> <h1>越野车评测</h1> <h2>进口越野车</h2> <h3>奥迪Q7</h3> <p>奥迪Q7是一款强调舒适性的全尺寸SUV，将运动性、功能 性、高科技和豪华品质巧妙地融为一体。</p> <h3>路虎揽胜</h3> <p>路虎旗下品牌。2010年，揽胜迎来了诞生40周年。40年的经典传承与积淀、</p> <h3>大众途锐</h3> <p>大众推出的一款高端SUV. 途锐的出现，实际上偏离了大众汽车公司一贯的样子—简朴，价格低廉</p> <h2>国产合资越野车</h2> <h3>奥迪Q5</h3> <p>奥迪Q5是一款动感而全能的SUV，它完美融合了运动型轿车的车身设计</p> <h3>奔驰GLK</h3> <p>GLK采用全新奔驰C级的技术，而它的设计和已经投放市场的GL级很接近。</p> <h3>大众途观</h3> <p>途观的出现打破了德系车无国产SUV产品的尴尬局面，同时也给消费者提供了更多、更好的选择。</p> <p>越野车是一种为越野而特别设计的汽车。主要特点是四轮驱动，较高的底盘、较好抓地性的轮胎、较高的排气管、较大的马力和粗大结实的保险杠。</p> </div>
使用纲要工具，可以得到下面的纲要：
1.越野车评测
1.进口越野车
- 奥迪Q7
- 路虎揽胜
- 大众途锐
2.国产合资越野车
- 奥迪 Q5
- 奔驰GLK
- 大众途观
这个大纲是根据网页中的标题来生成的，注意标题的级别，在以前，每张网页里只能使用一个 <h1> 标签。
上面的网页如果使用 HTML5 的新的标签，可能像下面这样：
<div>
<h1>越野车评测</h1>
<section>
<h2>进口越野车</h2>
<article>
<h3>奥迪Q7</h3>
<p>奥迪Q7是一款强调舒适性的全尺寸SUV，将运动性、功能性、高科技和豪华品质巧妙地融为一体。</p>
</article>
<article>
<h3>路虎揽胜</h3>
<p>路虎旗下品牌。2010年，揽胜迎来了诞生40周年。40年的经典传承与积淀、</p>
</article>
<article>
<h3>大众途锐</h3>
<p>大众推出的一款高端SUV. 途锐的出现，实际上偏离了大众汽车公司一贯的样子—简朴，价格低廉</p>
</article>
</section>
<section>
<h2>国产合资越野车</h2>
<article>
<h3>奥迪Q5</h3>
<p>奥迪Q5是一款动感而全能的SUV，它完美融合了运动型轿车的车身设计</p>
</article>
<article>
<h3>奔驰GLK</h3>
<p>GLK采用全新奔驰C级的技术，而它的设计和已经投放市场的GL级很接近。</p>
</article>
<article>
<h3>大众途观</h3>
<p>途观的出现打破了德系车无国产SUV产品的尴尬局面，同时也给消费者提供了更多、更好的选择。</p>
</article>
</section>
<p>越野车是一种为越野而特别设计的汽车。主要特点是四轮驱动，较高的底盘、较好抓地性的轮胎、较高的排气管、较大的马力和粗大结实的保险杠。</p>
</div>
同样可以得到这样的大纲：
1.越野车评测
1.进口越野车
- 奥迪Q7
- 路虎揽胜
- 大众途锐
2.国产合资越野车
- 奥迪 Q5
- 奔驰GLK
- 大众途观
区别是，使用 HTML5 的结构 ，生成的大纲不会根据标题来生成，而是由 <article> 和 <section> 标签。你可以试试任意的修改标题的级别，这样做不会影响到最终生成的大纲。
