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