Web语义化

对于“web语义化”这个词语我相信只要是从事前端的人都不陌生，固然我对这个词语也是很是熟悉，我相信从事前端工做的同事在投简历时都会在招聘需求里面看到这句话：“对web语义化有深入的理解”，那么到底什么是web语义化？它有什么做用？现将我本身收集整理的资料与你们分享一下：
什么是web语义化
现在互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着愈来愈重要的地位；而咱们制做网页也从当初的table表格嵌套发展到了 div+css，这是进步的标志。然而，咱们彷佛看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一 种html标签存在。这种现象(使用习惯)很是的很差，滥用现象使得网页制做彷佛就只剩下了div。刚才说了，时代是在进化着的，因此，诞生了web语义化 这个概念。而它又包含两个方面：html语义化及css命名语义化。
首先抽象的说下语义（Semantic）的概念：“语义能够简单地看做是数据所对应的现实世界中的事物所表明的概念的含义，以及这些含义之间的关 系，是数据在某个领域上的解释和逻辑表示。”那么web语义化也能够简单的理解为：用特定的语言来定义特定的事物。
为何要web语义化？

首先，人能够经过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能经过标签来判断内容的语义。由于页面的很大一部分流量是来自搜索引擎的，要使页面尽量地对搜索引擎友好，因此就要尽量地使标签语义化。

之前以我以为写一个好的符合标准的页面只须要把结构和表现分离，而后不要使用table，p等标签就好了，至于通篇都是div我也不会以为有什么问题，由于CSS很强大。可是，全部的标签都是有本身的语义的，下面给出一部分标签的语义：
div 语义：Division(分隔)
span 语义：Span(范围)
ol 语义：Ordered List(排序列表)
ul 语义：Unordered List(不排序列表)
li 语义：List Item(列表项目)
…………
若是无视标签语义和默认样式，全部标签都用div，其实也是能够写出来视觉效果很好的页面，只要你灵活运用CSS。可是那样的话虽然视觉上达到了要求，可是整个页面一点语义都没有，搜索引擎仍是看不懂。因此，要记住：
结构(html)才是重点，样式(css)是用来修饰结构的。因此，要先肯定html，肯定标签，再来选用合适的css
其次，SEO的时候咱们常常用h1来突出标题，用strong来突出关键字，这确实就是语义化的体现。就目前的搜索引擎来讲并不能想访客那样很直观的去查看网页，它只有分析源码来体现或猜想网站要表达的内容。好比咱们想表达某篇文章的标题， 咱们或许会这样写：
<div id=”title”>文章的标题</div>
访客或许能理解咱们的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎咱们能够这样来写：
<h1>这是标题</h1>
小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是很是的不友好。
固然语义化还有其余优点：
正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也可以更加快速的帮助新的前端工程师理解咱们的代码。语义化代码也更能帮助视障的人经过设备来理解咱们的内容等等。固然语义化代码也是咱们能力的体现。
怎样进行web语义化？
一、html语义化
一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其余的标记。换句话说，不要让css使一个html元素看起来就像另外一个html元素，好比用<div>来代替<p>标记标题。简而言之，就是你在看到内容的时候想一想用什么标签能更好的描述它，是什么就用什么标签。很明显Hx系列看起来很像标题，由于拥有粗体和较大的字号。<strong> ,<em> 用来区别于其余文字，起到了强调的做用。至于列表<ul>、<ol>等和表格<table>很明显的告诉你他们是作什么的。如：
<Hx>
<h1>、<h2> 、、<h5> 、<h6>，做为标题使用，而且依据重要性递减。<h1>是最高的等级。
<p>
段落标记，知道了<p> 做为段落，咱们就不会再使用 <br/> 来换行了，并且不要 <br/> <br/> 来区分段落与段落。<p> 中的文字会自动换行，并且换行的效果优于 <br> 。段落与段落之间的空隙也能够利用css来控制，很容易并且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。
二、css命名语义化
通常而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。


让咱们看看下面这个例子：

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

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