Semantics中Html/Xhtml真正符合標(biāo)準(zhǔn)嗎

這篇文章將為大家詳細(xì)講解有關(guān)Semantics中Html/Xhtml真正符合標(biāo)準(zhǔn)嗎，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

關(guān)于“Semantics中Html/Xhtml真正符合標(biāo)準(zhǔn)嗎”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。