最近看很多web前端校招的岗位要求都有一条对web语义化理解深刻，所以查了查资料。

1. 什么是web语义化？

维基百科说语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。

HTML5出来之前，我们都是用div来布局页面，而这些div没有实际的意义（虽然我们用css样式来形容这些div）。H5中新增了一些语义化的标签：article、footer、header、nav、section：

2 为什么要web语义化

其实wiki的定义里面说得非常清晰了。语义化的好处有三点

• 有利于搜索
• 容易兼容不同设备
• 结构清晰，利于团队的开发、维护

3 如何做到web语义化

• h1~h6的规划
  一篇文章应该只有一个总标题即h1，我的每一篇博文都是这种结构的。然后根据文章的具体内容，会有若干个h2及嵌套的h3

• p
  每一个段落都应该用p去表示，默认情况下p是有一定的缩进及行距，如果不想这样排版，应该另外写CSS去控制而不是用空格和</br>排版

• ul,ol,li (Unordered list,Ordered list,List item)
  li必须是在ul或者ol里面，当我们只是列举一些数据，但又达不到一个分论点这种语义时，或者在一些资讯的网站新闻列表中，都应该用此语义标签，例如你当前在看的就是。

• dl,dt,dd (description list,description list term,description list description)
  这表示一种带描述的层级递进的列表，其中dl带描述的列表，dt列表的标题，dd列表的描述 例如

    <dl>
    <dt>中国城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>广州 </dd>
    <dt>美国城市</dt>
    <dd>华盛顿 </dd>
    <dd>芝加哥 </dd>
    <dd>纽约 </dd>
    </dl>

效果图：

• address
  表示一种联系方式，方便爬虫立马找到你的联系方式，当然使用起来可能是办公地址更加实际

 <address>
    Written by p2227<br />
    contact me : kuangqiyi(At)gmail.com <br />
    Address: searching the next bussiness address<br />
    </address>

• header
  header 元素代表“网页”或“section”的页眉
  通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

• footer元素
  footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

• hgroup元素
  hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

• nav元素
  nav元素代表页面的导航链接区域。用于定义页面的主要导航部分

• aside元素
  aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
  在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小北，前端一枚</p>
    </aside>
</article>

• section元素
  section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
  一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
  表示文档中的节或者段；
  article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div