什么是web 语义化

web语义化这几年来一直是热门关键词，在一些论坛、招聘信息上随处可见。
那么到底什么是web语义化，相信大家一定不会陌生。
一般理解为：‘用特定的语言来定义特定的事物’，在这里引用知乎上一位用户的回答：‘我所理解的web语义化是互联网信息处理的自动化、智能化’，个人觉得很到位。

如果只是针对于视觉效果来说，其实我们完全可以不用考虑语义化，web开发中结构html与表现css分离，css足以给我们提供超炫的视觉感。但这样对于那些会点击右键查看源码、要进行web重构、seo搜索等来说，语义的不清晰、结构的不明确，可是非常糟糕的一件事情，因此，语义化的出现非常有必要。

web 语义化包含两个方面：html语义化和css命名语义化。

web语义化好处

1.去掉或样式丢失的时候能让页面呈现清晰的结构;

即使页面处于“裸奔”状态，也能有良好的可读性。
html本身是没有表现的，我们看到例如\是粗体，字体大小2em，加粗；\是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性

3.手持移动设备的无障碍阅读

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）,这时可能就需要更语义的标签来体现一个页面的易读性.

4.搜索引擎的友好收录

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重，利于seo。你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

5.技术趋势所趋

6.便于团队开发和维护

语义化的命名能够使我们在多人协作一个项目时更加有序和快捷。

Html 语义化

应该合理使用Html标签，（html的标签可查看w3school）.
以table为例。
进入\时代，我们不应摒弃\.\的本义应当用作数据列表的地方，对于一些数据处理用\显得更加有序和语义，并且使用合适的标签则更利于搜索，理解。
例如，简单的table代码如下：

增加了语义化的table:

这两段的代码在浏览器中显示的效果如图。

就视觉效果来说，他们显示的是一样的，但如果要在成千上万的信息中快速找到我们所需要的，这就需要借助计算机程序的力量，搜索爬虫等，而互联网信息处理的自动化、智能化很大程度上依据与我们对于html标签的使用。
万维网创始人 Tim Berners-Lee 爵士提出的美好愿景：语义网－一个能理解人类语言，和人类自然交流，并为人类服务的智能网络。
关于seo和html结构化可查看http://blog.jobbole.com/63176/

还有，例如为语义和体验而生的html5，大大增强了html标签语义化。

使用这样结构写出的网页其语义显而易见.
一些典型的标签可查看大拿网址。
http://blog.jobbole.com/63176/
http://www.html5jscss.com/html5-semantics-section.html

其他，微格式—将智能数据添加到网页上。
(x)HTML标签本身并不具备对它们的含义进行描述的功能。如果一个网站链接到另一个网站，那么该链接并不承载任何为什么有关这些网站互相链接的原因方面的信息。但是，如果这些都能被实现将会怎么样呢？微格式就是标签进行简单的扩展，将智能数据添加到网页上。如
<a href=”http://www.smallni.com” rel=”homepage”>Smallni’s Blog</a>
上面的链接标记\包括rel=”home”属性，该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。(wordpress做的不错)

css 命名的语义化

CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。

一个语义化的CSS命名至少应遵守如下约定：(可查看css相关规范)

1.尽量规避拼音命名，用英文单词去命名
2.单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
3.单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
4.对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂

另外，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。
如下结构化和语义化，

而现在我们想把页面中的元素调换一下位置，如果我们使用的是结构化方式(1)，那么我们就要把所有css类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果使用语义化方式则避免了此类问题。

换句话说，使用语义化方式的话，我们在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

参考网站：
http://www.w3cfuns.com/blog-5458331-5403450.html
其他等。。。