tion %> 山东打的是什么麻将
當前位置:首頁 > 建站知識

什么是Semantics?

更新時間:2009.06.22 瀏覽次數:

原文: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 PostingsJakob Nielsen 這位研究交互界面的權威顯然找到了其蝸牛式速度的合理性。大家可以訂閱一下此人的Alertbox。

烟台麻将规则 重庆时时龙虎合技巧 价值链是描述企业如何赚钱和发展的 广西快乐10分钟开奖结果 南方双彩网彩网 山西快乐十分推荐 北京十一选五 官方天津快乐十分下载 重庆时时猜龙虎计划 江西快3 广西快乐十分开奖号码 北京pk10走势软件 任选9场 AG空中战争开奖视频 手机微赚钱方式 天津十一选五 山东体彩十一选五软件