Semantics：Html/Xhtml是否真正符合標(biāo)準(zhǔn)

原文：http://jorux.com/archives/what-is-semantics/

Semantics可翻譯為語義的(學(xué))，它是Html/Xhtml是否真正符合標(biāo)準(zhǔn)的重要一環(huán)。Jorux在這和大家討論一些自己的觀點(diǎn)，如有不妥之處，還請(qǐng)各位網(wǎng)友指正。在西方，為什么這么多人如此重視網(wǎng)頁的Semantics，也許你會(huì)說，西方比較守規(guī)矩，重視標(biāo)準(zhǔn)，但我想說的是，在這些表象的背后有著“一只無形的手”控制著。

在此，舉個(gè)導(dǎo)航條的例子來說明我的觀點(diǎn)。大家應(yīng)該看見過很多諸如下類的導(dǎo)航結(jié)構(gòu)：

首頁 | 關(guān)于 | 博客 | 留言 | 相冊(cè)

它們有著共同的特點(diǎn)，都有分割條“|”將各個(gè)條目分開。要實(shí)現(xiàn)以上效果的導(dǎo)航欄，其Html/Xhtml有很多種寫法，在此僅具幾個(gè)比較典型的例子：

例1：

<p><a href=”home.html”>首頁</a> | <a href=”about.html”>關(guān)于</a> | <a href=”blog.html”>博客</a> | <a href=”message.html”>留言</a> | <a href=”album.html”>相冊(cè)</a></p>

例2：

<ul>
<li><a href=”home.html”>首頁</a></li>
<li>|</li>
<li><a href=”about.html”>關(guān)于</a></li>
<li>|</li>
<li><a href=”blog.html”>博客</a></li>
<li>|</li>
<li><a href=”message.html”>留言</a></li>
<li>|</li>
<li><a href=”album.html”>相冊(cè)</a></li>
</ul>

例3：

<ul>
<li><a href=”home.html”>首頁</a> | </li>
<li><a href=”about.html”>關(guān)于</a> | </li>
<li><a href=”blog.html”>博客</a> | </li>
<li><a href=”message.html”>留言</a> | </li>
<li><a href=”album.html”>相冊(cè)</a></li>
</ul>

例4：

<ul>
<li><a href=”home.html”>首頁</a></li>
<li><a href=”about.html”>關(guān)于</a></li>
<li><a href=”blog.html”>博客</a></li>
<li><a href=”message.html”>留言</a></li>
<li><a href=”album.html”>相冊(cè)</a></li>
</ul>

以上為說明Semantics而舉的四個(gè)導(dǎo)航條Html/Xhtml例子.
例1使用了段落p作為導(dǎo)航條的語義元素標(biāo)識(shí)(相對(duì)于結(jié)構(gòu)元素，諸如div等)。很顯然它犯了很典型的錯(cuò)誤，錯(cuò)誤的把原本是條目(list)的導(dǎo)航欄看成了段落。
例2,3,4都使用了ul/li作為導(dǎo)航欄的語義元素標(biāo)識(shí)，它們的區(qū)別進(jìn)在于分割條“|”的位置，以及是否在Html/Xhtml中出現(xiàn)。
由于CSS的存在，利用其控制表象的能力，可以將以上四個(gè)例子的外表變得一模一樣，而不被肉眼察覺。但是這只是表象，隨著搜索引擎的互聯(lián)網(wǎng)地位提升，以及XML的使用頻率和重要性增加，它們作為Robot，只讀Html/Xhml/XML源代碼，而不讀CSS，也就是說它們更在乎你的網(wǎng)頁的實(shí)際含義，而不是你的網(wǎng)頁好看與否。也就是說讓你的網(wǎng)頁符合語義規(guī)范，就是讓這些Robot更好的讀懂你的網(wǎng)頁，提高你的網(wǎng)站在搜索結(jié)果中的排名，獲得更大的利益，這只無形的手決定了西方對(duì)Semantics的重視，甚至超過網(wǎng)頁是否通過W3C的檢測(cè)的重要性。

我個(gè)人認(rèn)為的Semantics的含義就是：
將CSS去除，你的網(wǎng)頁表現(xiàn)依然規(guī)范，易懂。

這條法則，能讓你的肉眼和Robot的邏輯達(dá)到某種程度的統(tǒng)一。利用以上理論，在例1中犯的錯(cuò)誤，就比較容易理解，條目中的關(guān)鍵詞比段落中的關(guān)鍵詞，更具價(jià)值。一個(gè)原本是條目的內(nèi)容為什么還要使用段落？！

那么例2,3,4中，分隔條怎么會(huì)如此重要。

在例2,3之中只是位置的區(qū)別，現(xiàn)在不用任何CSS來控制表象，那么其Html/Xhtml表現(xiàn)的區(qū)別是顯而易見的，讀者可以試試。在例2中，分割條會(huì)單獨(dú)占據(jù)四個(gè)li，原本五個(gè)li變?yōu)榱司艂€(gè)。打個(gè)比方，一個(gè)五個(gè)人的公司現(xiàn)在變?yōu)榱司艂€(gè)人的，大家的股份被稀釋了一半，每個(gè)股東的重要性當(dāng)然會(huì)被削弱。更要命的是有四個(gè)股東居然是一模一樣的。Robot可能會(huì)認(rèn)為那四個(gè)股東(|)更為重要，而降低了其他股東(關(guān)鍵詞)的重要性。在例3中，使分隔條成為原來股東的秘書，自然不會(huì)影響關(guān)鍵詞的重要性。
從表象考慮，也是例3優(yōu)于例2的表現(xiàn)，例2中分隔條單獨(dú)占據(jù)一行，讓人費(fèi)解。

那么例4中，沒有使用分隔條，其在語義學(xué)上更優(yōu)。分隔條的表現(xiàn)，可以在CSS中用圖片背景輕松實(shí)現(xiàn)，而且像這種類型的單色分隔條，用gif格式的話，只有幾個(gè)字節(jié)，不影響下載速度。

以上是Jorux在跟西方人交流中，結(jié)合用戶反饋，得到的一些心得體會(huì)。大家如有不同觀點(diǎn)或是問題，盡管拍磚。

希望以此引起各位大陸朋友的重視，重視使用h1/h2/p/ul/li/blockquote/table等語義元素的使用和規(guī)范，不要濫用div等結(jié)構(gòu)元素，Robot是不太親近此類元素的。比方說，嚴(yán)格意義上說單個(gè)網(wǎng)頁，只允許出現(xiàn)一次h1，就是你的網(wǎng)頁title，h1在Robot中的地位僅次于<title></title>。

注：已經(jīng)忘了上次更新是什么時(shí)候了，如此更新速度，已經(jīng)讓我?guī)缀跸敕艞墶Ｔ詾?，這種半死狀態(tài)的網(wǎng)站，會(huì)逐漸被遺忘，但是Feed的訂閱量卻在攀升，這讓我懷疑Feedburner的計(jì)數(shù)器是不是出了故障。
能讓我聊以慰藉的就是這篇 Write Articles, Not Blog Postings ，Jakob Nielsen 這位研究交互界面的權(quán)威顯然找到了其蝸牛式速度的合理性。大家可以訂閱一下此人的Alertbox。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)