HTML5教程:语义化标签是什么？有什么作用？
日期：2014-03-03 浏览次数：20688 次
我看一些招聘要求上都有"熟悉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标准之一：语义化标签呢？你可以把你的页面暂时去掉款式后看可读性怎样样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎样样，而如果你的页面去掉款式了感觉仍然不是芜杂无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。
这只是我的一点看法，希望抛砖引玉一下，看过的人把本人的想法也说出来，让大家知道你的想法，也是完善此文。
