#浅谈web语义化
##web语义化是什么
HTML5标准出来的时候，我曾经诧异为什么要定义这么多header footer nav article标准，DIV不挻好的嘛，方便开发人员记忆啊。但当页面开发完，面对所有都是DIV标签的网页，就会混乱了，到底哪里是页头，哪里是正文。当然我们可以用浏览器打开，F12一下，就一目了然了，但如果是网络爬虫，那就没这么容易识别到这个东西了。
引用wiki的定义，[语义化](http://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E5%8C%96)是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。
通俗而言，就是HTML的结构清晰，该是段落就用p标签，该是页脚就用footer标签，而不要统一都用DIV。
##为什么要web语义化
其实wiki的定义里面说得非常清晰了。语义化的好处有三点
1. 有利于搜索
2. 容易兼容不同设备
3. 结构清晰，利于团队的开发、维护
##要怎么做
一个较为经典的案例是，初学word的人经常会用空格来进行缩进，用回车来填充进行换页，这种排版在页面布局发生变化时，就会乱掉。所以我们要用回word本身的缩进，换页符功能，真真正正告诉计算机这个排版的真正意图，才能使得排版适应性强。
HTML不是二进制文件，导致人们在编写的时候随意性更加大了。我们要经常关注一些语义化的标签，常用并且熟记。
除了h1~h6,p,ul,ol等比较经典的，dt,dl,dd可能用得比较少，em,strong等也要引起关注
HTML5还新增了不少语义化的标准，详细的要在实际使用中去慢慢记忆了。
具体的实施还要结合具体项目组制定一份标准，再严格执行，才能真实实施起来。
##参考
http://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E5%8C%96
http://www.html5jscss.com/?p=30
http://www.w3school.com.cn/html5/tag_phrase_elements.asp
浅谈web语义化
web语义化是什么
HTML5标准出来的时候，我曾经诧异为什么要定义这么多header footer nav
article标准，DIV不挻好的嘛，方便开发人员记忆啊。但当页面开发完，面对所有都是DIV标签的网页，就会混乱了，到底哪里是页头，哪里是正文。当然我们可以用浏览器打开，F12一下，就一目了然了，但如果是网络爬虫，那就没这么容易识别到这个东西了。
引用wiki的定义，语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。
通俗而言，就是HTML的结构清晰，该是段落就用p标签，该是页脚就用footer标签，而不要统一都用DIV。
为什么要web语义化
其实wiki的定义里面说得非常清晰了。语义化的好处有三点
- 有利于搜索
- 容易兼容不同设备
- 结构清晰，利于团队的开发、维护
要怎么做
一个较为经典的案例是，初学word的人经常会用空格来进行缩进，用回车来填充进行换页，这种排版在页面布局发生变化时，就会乱掉。所以我们要用回word本身的缩进，换页符功能，真真正正告诉计算机这个排版的真正意图，才能使得排版适应性强。
HTML不是二进制文件，导致人们在编写的时候随意性更加大了。我们要经常关注一些语义化的标签，常用并且熟记。
除了h1~h6,p,ul,ol等比较经典的，dt,dl,dd可能用得比较少，em,strong等也要引起关注
HTML5还新增了不少语义化的标准，详细的要在实际使用中去慢慢记忆了。
具体的实施还要结合具体项目组制定一份标准，再严格执行，才能真实实施起来。
参考
http://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89%E5%8C%96
http://www.html5jscss.com/?p=30
http://www.w3school.com.cn/html5/tag_phrase_elements.asp
浅谈web语义化,古老的榕树,5-wow.com
