Web语义化

本文转自：http://blog.csdn.net/li2274221/article/details/25188497

对于“web语义化”这个词语我相信只要是从事前端的人都不陌生，当然我对这个词语也是非常熟悉，我相信从事前端工作的同事在投简历时都会在招聘需求里面看到这句话：“对web语义化有深刻的理解”，当然我本人也是从某公司的招聘需求里看到的这个词语，那么到底什么是web语义化？它有什么作用？现将我自己收集整理的资料与大家分享一下：

• 什么是web语义化
• 
  

如今互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作网页也从当初的table表格嵌套发展到了 div+css，这是进步的标志。然而，我们似乎看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一 种html标签存在。这种现象(使用习惯)非常的不好，滥用现象使得网页制作似乎就只剩下了div。刚才说了，时代是在进化着的，所以，诞生了web语义化 这个概念。而它又包含两个方面：html语义化及css命名语义化。

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关 系，是数据在某个领域上的解释和逻辑表示。”那么web语义化也可以简单的理解为：用特定的语言来定义特定的事物。

• 为什么要web语义化？

我们知道HTML5新增的标签，比如<header> 和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡 的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

以下是HTML语义化的优势所在：

良好的语义(X)HTML标记有助于提升你的网站对访客的易用性.
并不是所有光临你网站的访客都能够“看到”你的CSS和JavaScript,但他们都会得到你的(X)HTML.因此,你的标记如果能在语义方面对理解你的内容提供必要的帮助将会非常重要.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

使用语义标记可以确保这些设备以一种有意义的方 式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情 况（包括现有的或者将来新的设备）.

例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式,一 旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是运用语义标 记,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩 钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

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

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

以前以我对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语义化？

一个 XHTML  元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让  CSS  使一个  HTML  元素看起来就像另一个  HTML  元素，比如用 <div> 来代替 <p> 标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

首先是关于语义（Semantics ）和默认样式的区别，默认样式是浏览器设定的一些常用 tag 的表现形式，个人认为他的主要目的就是让大家直观的认识标签 (markup) 和属性 (attribute) 的用途和作用，很明显 Hx 系列看起来很像标题，因为拥有粗体和较大的字号。 <strong> ,<em> 用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。

适当的运用如下标记：

<Hx>

<h1>、、 <h3> 、 <h4> 、 <h5> 、 <h6>, 作为标题使用，并且依据重要性递减。 <h1> 是最高的等级。

<P> 

段落标记，知道了<p> 作为段落，你就不会再使用 <br/> 来换行了，而且不需要 <br/> <br/> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br> 。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。

<ul>、<ol>、<li>

<ul>无序列表，很常见的到了大家广泛的使用， <ol> 有序列表也挺常用。在 web 标准化过程中， <ul>  还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，就是美观方面差了一点。

<dl>、<dt>、<dd>

dl就是 “ 定义列表 ” 。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>

<em> 是用作强调的，是用作重点强调的。 <strong> 是用作重点强调的。

<table>、<td>、<th>、< caption >、 summary 

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。 <th> 为表格标题，属性summar 为摘要， <caption> 标签为首部说明， <thead> 标签为表格头部， <tbody> 标签为表格主体内容，<tfoot> 标签为表格尾部。

<ins>, <del>

知道del ，就不要再用 <s> 做删除线了，用 del 显然更具有语义化。而且 del 还带有 cite 和 datetime 来表明删除的原因以及删除的时间。 ins 是表示插入，也有这样的属性。

<abbr>、<acronym>

<abbr>标签是表示 web 页面上的简称， <acronym> 标签为取首字母缩写 。

alt属性和 title 属性

title属性用来为元素提供额外说明信息 title 属性可以用在除了 base ， basefont ， head ， html ， meta ， param ， script 和title 之外的所有标签。但是并不是必须的。

• 
  

1、html语义化

HTML是一种对文本内容进行结构和意义（或者说”语义”）进行补充的方法.页面中每一部分内容都包含一种含义.HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子.而HTML语义化则是使用html所提供的现有标签(因为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) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。

2、css命名语义化

一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

alt属性为不能显示图像、窗体或 applets 的用户代理（ UA ），指定替换文字。替换文字的语言由 lang 属性指定。