HTML5教程:语义化标签是什么?有什么作用?

2012-04-15 02:34:27  来源:网页教学网 

钱柜娱乐Webjx文章简介:记得有一次恐怖的经历,那个页面嵌套了不知是十几层还是几十层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标准之一:语义化标签呢?你可以把你的页面暂时去掉样式后看可读性怎么样,如果这个时候感觉你的页面很乱,那就说明的的页面的语义化标签不怎么样,而如果你的页面去掉样式了感觉依然不是杂乱无章的,那么,就说明你的页面结构清晰,语义化标签比较可以了。

这只是我的一点看法,希望抛砖引玉一下,看过的人把自己的想法也说出来,让大家知道你的想法,也是完善此文。

更多