HTML5教程:語(yǔ)義化標(biāo)簽是什么？有什么作用？

2024-08-26 00:16:39

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(m.survivalescaperooms.com)文章簡(jiǎn)介：記得有一次恐怖的經(jīng)歷,那個(gè)頁(yè)面嵌套了不知是十幾層還是幾十層div.讓我看的時(shí)候立馬頭暈...其中有些能用span標(biāo)簽,能用p標(biāo)簽的,也用div.能用h1,hx的也用div標(biāo)簽.真是讓人很無(wú)語(yǔ)啊..這個(gè)時(shí)候我多么希望該開(kāi)發(fā)者有點(diǎn)"語(yǔ)義化標(biāo)簽"的概念和行動(dòng)啊.

我看一些招聘要求上都有"熟悉Web語(yǔ)義化"這一詞和"理解/熟悉/精通web標(biāo)準(zhǔn)".而標(biāo)簽語(yǔ)義化就是web標(biāo)準(zhǔn)的一部分,所以我就把自己以前發(fā)在博客園的一篇貼子小修改一下,再貼過(guò)來(lái)...希望前端入門的er們能知道有這么個(gè)東西.

記得有一次恐怖的經(jīng)歷,那個(gè)頁(yè)面嵌套了不知是十幾層還是幾十層div.讓我看的時(shí)候立馬頭暈...其中有些能用span標(biāo)簽,能用p標(biāo)簽的,也用div.能用h1,hx的也用div標(biāo)簽.真是讓人很無(wú)語(yǔ)啊..這個(gè)時(shí)候我多么希望該開(kāi)發(fā)者有點(diǎn)"語(yǔ)義化標(biāo)簽"的概念和行動(dòng)啊..那么

一：(理論)語(yǔ)義化標(biāo)簽是什么？
語(yǔ)義化標(biāo)簽就是盡量使用有相對(duì)應(yīng)的結(jié)構(gòu)的含義的Html的標(biāo)簽，以Table為例：
<table>

    <tr>

        <td>消費(fèi)項(xiàng)目</td>

        <td>消費(fèi)金額</td>

    </tr>

    <tr>

        <td>吃飯</td>

        <td>20元</td>

    </tr>

</table>

你看出了上面的Table有什么毛病嗎？嘿嘿，那你看這個(gè)語(yǔ)義化的標(biāo)簽
<table>

    <caption>花費(fèi)記賬</caption>

    <thead>

        <tr>

            <th>消費(fèi)項(xiàng)目</th>

            <th>消費(fèi)金額</th>

        </tr>

    </thead>

    <tbody>

        <td>吃飯</td>

        <td>20元</td>

    </tbody>

</table>

這兩塊代碼的標(biāo)簽不一樣，第二個(gè)表格的這些標(biāo)簽代碼，無(wú)疑更符合Web標(biāo)準(zhǔn).
<caption>:表格的標(biāo)題;
<thead>:一表格的表頭;
<th>:表的某一列的列頭。

再說(shuō)我們習(xí)以為常的
<title>博客園簡(jiǎn)介</title><body>博客園是一個(gè)軟件開(kāi)發(fā)的技術(shù)樂(lè)園，它于2004年創(chuàng)辦，這里...</body>

你看，為什么我們看一篇文章，一下就知道標(biāo)題在哪呢？在瀏覽器的頂端。那為什么搜索引擎能抓取呢？就是它知道這個(gè)語(yǔ)義化標(biāo)簽<title>里的就是文章標(biāo)題，要是我們不遵守這個(gè)，而是：
<span>博客園簡(jiǎn)介</span><span>博客園是一個(gè)軟件開(kāi)發(fā)的技術(shù)樂(lè)園，它于2004年創(chuàng)辦，這里...<span>

那搜索引擎怎么就知道誰(shuí)是標(biāo)題，誰(shuí)是內(nèi)容了呢？它又靠什么去抓取標(biāo)題呢?其實(shí)語(yǔ)義化不僅可以是標(biāo)簽語(yǔ)義化,還可以延伸成結(jié)構(gòu)語(yǔ)義化.舉例:
#left{float:left;margging-left:50px;}

#right{float:right;margin-top:100px;}

<div id="left">content..</div>

<div id="right">content..</div>

這個(gè)例子里對(duì)id的命名稍微有點(diǎn)夸張,但是類似的情況卻使有的,當(dāng)我們想把#left這個(gè)div放到頁(yè)面的右邊,和#right調(diào)換位置時(shí),難道你可以把樣式改成這樣?
#left{float:right;margin-left:50px;}

#right{float:left;margin-top:100px;}

那樣看著多別扭,多誤導(dǎo)人這兩個(gè)div的布局啊.
應(yīng)該寫成這樣.
<div id="main">content..</div>

<div id="sidebar">content..</div>

那樣既一目了然這幾個(gè)div里是什么內(nèi)容也方便對(duì)其中的樣式進(jìn)行修改.

二：(理論)語(yǔ)義化標(biāo)簽怎么樣？
1.結(jié)構(gòu)更好，更利于搜索引擎的抓取（SEO的優(yōu)化）和開(kāi)發(fā)人員的維護(hù)(可維護(hù)性更高，因?yàn)榻Y(jié)構(gòu)清晰,so易于閱讀)。
2.更有利于特殊終端的閱讀(手機(jī)，個(gè)人助理等）。

三：(行動(dòng))語(yǔ)義化標(biāo)簽怎么辦？
盡量用有結(jié)構(gòu)含義的,少用無(wú)語(yǔ)義的，如<span>,<div>無(wú)意義，看不出是什么東西,可是<address>一看就知道這里面的是地址,em標(biāo)簽一看就知道這個(gè)是強(qiáng)調(diào)的內(nèi)容,區(qū)分于不同內(nèi)容。

那么，怎么判斷你的頁(yè)面是否符合Web標(biāo)準(zhǔn)之一：語(yǔ)義化標(biāo)簽?zāi)兀磕憧梢园涯愕捻?yè)面暫時(shí)去掉樣式后看可讀性怎么樣，如果這個(gè)時(shí)候感覺(jué)你的頁(yè)面很亂，那就說(shuō)明的的頁(yè)面的語(yǔ)義化標(biāo)簽不怎么樣，而如果你的頁(yè)面去掉樣式了感覺(jué)依然不是雜亂無(wú)章的，那么，就說(shuō)明你的頁(yè)面結(jié)構(gòu)清晰，語(yǔ)義化標(biāo)簽比較可以了。

這只是我的一點(diǎn)看法，希望拋磚引玉一下，看過(guò)的人把自己的想法也說(shuō)出來(lái)，讓大家知道你的想法，也是完善此文。