web语义化

WEB 语义化 

很多招聘信息中提到web语义化，我将自己收集整理的资料总结与你们分享一下：

先提几个问题，为什么使用语义化的HTML？语义化的 HTML有什么好处？

为什么使用web语义化的HTML结构？

web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素的含义，能够让人和搜索引擎都容易理解。如果可以合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面内容，予以较高的重视。HTML5的一大改革就是语义化标签的改善。

其实简单的来说就是让机器可以读懂内容。web页面的解析是由搜索引擎来进行搜索，机器来解析。所以语义化的标准是尽可能的让机器读懂。人可以通过视觉的划分判断内容的语义，搜索引擎看到的是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以尽可能地使用标签语义化。

最初的HTML中如h1~h6、thead、ul、ol等标签，通过标签的语义，最初设计的想法，来达到语义化的要求。如标题、表头、无序、有序列表，搜索引擎很好的利用了这些语义化标签抓取内容

后来，最初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。

制定HTML5的W3C组织采用了诸如header、footer、section等语义化标签，来进行页面布局的设计想法，弥补了采用id="header"或者class="section"等。

语义化HTML结构到底有什么好处呢？

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

<h1>加粗，字体大小2em;<strong>是加粗的，这不是html的表现而是默认的css样式。浏览器都有默认的样式，默认样式的目的是为了更好的表达html语义。可以说浏览器的默认样式和语义化的html标签是不可分割的。（h1和div的样式对比）

2、屏幕阅读器会完全根据你的标记来“读”你的网页

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音。

3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。

4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

5、你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后。除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。
SEO主要还是靠你网站的内容和外部链接的

6、便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

参考：https://www.cnblogs.com/p2227/p/3586725.html    http://blog.csdn.net/li2274221/article/details/25188497      http://www.mamicode.com/info-detail-482090.html