理解 HTML5 的语义结构

在以前，网页内容的结构都是用 <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.进口越野车

1. 奥迪Q7
2. 路虎揽胜
3. 大众途锐

2.国产合资越野车

1. 奥迪 Q5
2. 奔驰GLK
3. 大众途观

这个大纲是根据网页中的标题来生成的，注意标题的级别，在以前，每张网页里只能使用一个 <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.进口越野车

1. 奥迪Q7
2. 路虎揽胜
3. 大众途锐

2.国产合资越野车

1. 奥迪 Q5
2. 奔驰GLK
3. 大众途观

区别是，使用 HTML5 的结构 ，生成的大纲不会根据标题来生成，而是由 <article> 和 <section> 标签。你可以试试任意的修改标题的级别，这样做不会影响到最终生成的大纲。