武林网(www.vevb.com)文章简介：记得有一次恐怖的经历,那个页面嵌套了不知是十几层还是几十层div.让我看的时候立马头晕...其中有些能用span标签,能用p标签的,也用div.能用h1,hx的也用div标签.真是让人很无语啊..这个时候我多么希望该开发者有点"语义化标签"的概念和行动啊.
我看一些招聘要求上都有熟悉Web语义化这一词和理解/熟悉/精通web标准.而标签语义化就是web标准的一部分,所以我就把自己以前发在博客园的一篇贴子小修改一下,再贴过来...希望前端入门的er们能知道有这么个东西.
记得有一次恐怖的经历,那个页面嵌套了不知是十几层还是几十层div.让我看的时候立马头晕...其中有些能用span标签,能用p标签的,也用div.能用h1,hx的也用div标签.真是让人很无语啊..这个时候我多么希望该开发者有点语义化标签的概念和行动啊..那么
一：(理论)语义化标签是什么？
语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
<table>
<tr>
<td>消费项目</td>
<td>消费金额</td>
</tr>
<tr>
<td>吃饭</td>
<td>20元</td>
</tr>
</table>
你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
<table>
<caption>花费记账</caption>
<thead>
<tr>
<th>消费项目</th>
<th>消费金额</th>
</tr>
</thead>
<tbody>
<td>吃饭</td>
<td>20元</td>
</tbody>
</table>
这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题;
<thead>:一表格的表头;
<th>:表的某一列的列头。
再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>
你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>
那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:left;margging-left:50px;}
#right{float:right;margin-top:100px;}
<div id=left>content..</div>
<div id=right>content..</div>
这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:right;margin-left:50px;}
#right{float:left;margin-top:100px;}
那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id=main>content..</div>
<div id=sidebar>content..</div>
那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.
二：(理论)语义化标签怎么样？
1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机，个人助理等）。
三：(行动)语义化标签怎么办？
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。
这只是我的一点看法，希望抛砖引玉一下，看过的人把自己的想法也说出来，让大家知道你的想法，也是完善此文。