|
原文：http://jorux.com/archives/what-is-semantics/
Semantics可翻譯為語義的(學(xué))，它是Html/Xhtml是否真正符合標(biāo)準(zhǔn)的重要一環(huán)。Jorux在這和大家討論一些自己的觀點，如有不妥之處，還請各位網(wǎng)友指正。在西方，為什么這么多人如此重視網(wǎng)頁的Semantics，也許你會說，西方比較守規(guī)矩，重視標(biāo)準(zhǔn)，但我想說的是，在這些表象的背后有著“一只無形的手”控制著。
在此，舉個導(dǎo)航條的例子來說明我的觀點。大家應(yīng)該看見過很多諸如下類的導(dǎo)航結(jié)構(gòu)：
首頁 | 關(guān)于 | 博客 | 留言 | 相冊
它們有著共同的特點，都有分割條“|”將各個條目分開。要實現(xiàn)以上效果的導(dǎo)航欄，其Html/Xhtml有很多種寫法，在此僅具幾個比較典型的例子：
例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”>相冊</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”>相冊</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”>相冊</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”>相冊</a></li>
</ul>
以上為說明Semantics而舉的四個導(dǎo)航條Html/Xhtml例子.
例1使用了段落p作為導(dǎo)航條的語義元素標(biāo)識(相對于結(jié)構(gòu)元素，諸如div等)。很顯然它犯了很典型的錯誤，錯誤的把原本是條目(list)的導(dǎo)航欄看成了段落。
例2,3,4都使用了ul/li作為導(dǎo)航欄的語義元素標(biāo)識，它們的區(qū)別進在于分割條“|”的位置，以及是否在Html/Xhtml中出現(xiàn)。
由于CSS的存在，利用其控制表象的能力，可以將以上四個例子的外表變得一模一樣，而不被肉眼察覺。但是這只是表象，隨著搜索引擎的互聯(lián)網(wǎng)地位提升，以及XML的使用頻率和重要性增加，它們作為Robot，只讀Html/Xhml/XML源代碼，而不讀CSS，也就是說它們更在乎你的網(wǎng)頁的實際含義，而不是你的網(wǎng)頁好看與否。也就是說讓你的網(wǎng)頁符合語義規(guī)范，就是讓這些Robot更好的讀懂你的網(wǎng)頁，提高你的網(wǎng)站在搜索結(jié)果中的排名，獲得更大的利益，這只無形的手決定了西方對Semantics的重視，甚至超過網(wǎng)頁是否通過W3C的檢測的重要性。
我個人認(rèn)為的Semantics的含義就是：
將CSS去除，你的網(wǎng)頁表現(xiàn)依然規(guī)范，易懂。
這條法則，能讓你的肉眼和Robot的邏輯達到某種程度的統(tǒng)一。利用以上理論，在例1中犯的錯誤，就比較容易理解，條目中的關(guān)鍵詞比段落中的關(guān)鍵詞，更具價值。一個原本是條目的內(nèi)容為什么還要使用段落？！
那么例2,3,4中，分隔條怎么會如此重要。
在例2,3之中只是位置的區(qū)別，現(xiàn)在不用任何CSS來控制表象，那么其Html/Xhtml表現(xiàn)的區(qū)別是顯而易見的，讀者可以試試。在例2中，分割條會單獨占據(jù)四個li，原本五個li變?yōu)榱司艂�。打個比方，一個五個人的公司現(xiàn)在變?yōu)榱司艂�人的，大家的股份被稀釋了一半，每個股東的重要性當(dāng)然會被削弱。更要命的是有四個股東居然是一模一樣的。Robot可能會認(rèn)為那四個股東(|)更為重要，而降低了其他股東(關(guān)鍵詞)的重要性。在例3中，使分隔條成為原來股東的秘書，自然不會影響關(guān)鍵詞的重要性。
從表象考慮，也是例3優(yōu)于例2的表現(xiàn)，例2中分隔條單獨占據(jù)一行，讓人費解。
那么例4中，沒有使用分隔條，其在語義學(xué)上更優(yōu)。分隔條的表現(xiàn)，可以在CSS中用圖片背景輕松實現(xiàn)，而且像這種類型的單色分隔條，用gif格式的話，只有幾個字節(jié)，不影響下載速度。
以上是Jorux在跟西方人交流中，結(jié)合用戶反饋，得到的一些心得體會。大家如有不同觀點或是問題，盡管拍磚。
希望以此引起各位大陸朋友的重視，重視使用h1/h2/p/ul/li/blockquote/table等語義元素的使用和規(guī)范，不要濫用div等結(jié)構(gòu)元素，Robot是不太親近此類元素的。比方說，嚴(yán)格意義上說單個網(wǎng)頁，只允許出現(xiàn)一次h1，就是你的網(wǎng)頁title，h1在Robot中的地位僅次于<title></title>。
注：已經(jīng)忘了上次更新是什么時候了，如此更新速度，已經(jīng)讓我?guī)缀跸敕艞墶Ｔ詾�，這種半死狀態(tài)的網(wǎng)站，會逐漸被遺忘，但是Feed的訂閱量卻在攀升，這讓我懷疑Feedburner的計數(shù)器是不是出了故障。
能讓我聊以慰藉的就是這篇 Write Articles, Not Blog Postings ，Jakob Nielsen 這位研究交互界面的權(quán)威顯然找到了其蝸牛式速度的合理性。大家可以訂閱一下此人的Alertbox。
本文鏈接：http://m.95time.cn/tech/web/2008/6078.asp 
出處：Jorux Notebook
責(zé)任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
