Semantics:Html/Xhtml是否真正符合標準

來源:互聯網
上載者:User

原文: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。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。