最近看很多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及嵌套的h3p
每一个段落都应该用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
