语义化你的HTML标签

作为一个前端开发人员，你要是没有听说过css，那你肯定是一个“out-man”。随着css的深入人心，结构与表现与行为的逐渐分离，HTML语义化成了炙手可热的卖点。

语义化的HTML首先要强调HTML结构

一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有html结构那就什么也不是了，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力发挥到极致，提供一个用既干净又有结构的HTML是非常必要的。

其实HTML中的标签都有他自身的含义，只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着CSS的重现江湖，表格也终于回到他的本质工作——列表数据。它会告诉我们说：“这行是一个标题；这几行组成了一个段落；这些文字是项目列表……”在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。

写语义化的HTML结构其实很简单，首先掌握HTML中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

<Hx>

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

P

段落标记，知道了 p 作为段落，你就不会再使用<br />来换行了，而且不需要<br /> 来区分段落与段落。p中的文字会自动换行，而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。

<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属性用来为元素提供额外说明信息，但是并不是必须的。

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

让你语义化HTML结构的无数条理由：

1.去掉或样式丢失的时候能让页面呈现清晰的结构：
HTML本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的， 不要误会这是HTML的表现，这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。

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

如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。

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

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。

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

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

5.便于团队开发和维护

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