原文：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表現的區別
12下一頁