作天在變賣大學書籍時也不曉得怎麼的就想起語義化這個概念，於是乎也就花點時間搞搞它。語義化標記對於剛學web前端指令碼語言的童鞋來說往往都沒太在意，哇哈哈，其實我也就算只比較老的菜鳥而已，本文不是說教，只是分享有關語義化的一些東西。
那什麼是語義化呢？
首先抽象的說下語義（semantic）的概念：「語義可以簡單地看作是資料所對應的現實世界中的事物所代表的概念的含義，以及這些含義之間的關係，是資料在某個領域上的解釋和邏輯表示。」娘的，太抽象了。其實在那個用4000w打造的超級防猥瑣的綠壩就有個叫語義分析的功能，如果發現不健康資訊，立馬對其進行關閉，哼哼。
通過強大的拆字我們可以簡單的理解它為：用特定的語言來定義特定的事物。在web前端中語義化標記也可以這樣理解。
綠壩它全家靚照
你是不是特別特別喜歡div標籤？
在剛開始學習web前端時想必你肯定聽說div+css布局，說的那是如此好如此妙如此呱呱叫，於是乎你就div+css了，div套div，div何其多，去w3c驗證發現還能通過，仰天長呼，so easy，so easy。
然而堂堂的(x)html就乙個div標籤？答案肯定不是，那其他的標籤是不是沒有用？答案更不是。任何事物存在亦有它的價值所在滴。在初學xhtml時，我曾經犯了乙個很傻的錯誤，在定義幾個行列表項時我是這樣寫的：
<divid
="list"
>
蟲下公尺<br/>
wlsy<br/>
蟲下公尺wlsy合體<br/>
div>你別笑，我當時真的是這樣寫的，只不過其中的文字記不清了，寫完後發現在瀏覽器中是我想要的結果也就認為**是正確的。**是正確的嗎？**當然是正確的但是不規範。在xhtml中有個專門定義列表的標籤ul（無序列表），ol（有序列表），dl（定義列表）。所以更加規範，更加有語義的我們可以這樣寫：
<ulid
="list"
>
<li>蟲下公尺
li>
<li>wlsy
li>
<li>蟲下公尺wlsy合體
li>
ul>在學習xhtml時，應盡量能夠熟悉有定義到的標籤，並在特定的內容加以應用，比如我們可以用strong(用strong來替代b)標籤來強調內容，用hx(h1,h2…..)來定義標題等等。我可以**奉獻我搜刮到一些資源：xhtml cheat sheet
（這是常用的xhtml標籤**，可以下下來看，不過是英文的），html 4.01 / xhtml 1.0 參考手冊
（這裡面有標籤的詳細用而且還配有例項），在早些時候我有寫過一篇：幾個不太常見的(x)html標籤
。另外關於語義化標籤藍色理想上有篇帖子很不錯：http://bbs.blueidea.com/thread-2658231-1-1.html
所以呢相對於叫div+css布局，我更喜歡叫做(x)html+css布局。
結構命名中的語義化
這裡說的結構就是就是我們平常編寫的xhtml**，而命名就是我們為id或class所取的名稱。
有個例子是這樣的，你是不是有時會類似這樣來寫**（**比較粗糙演示用）：
<divid
="left"
>
<p>今天是個好天氣呀
div>
<divid
="right"
>
<p>我的一些**
p>
div>css**：
#left
#right但是某天我突然閒著沒事想換個布局來增加新鮮感，比如對掉左右邊的內容，那麼我僅僅要在css裡面這樣改：
#left
#right結果呈現的效果確實是你想要的，但是為其id命名是不是違背的你的原意？你原本命名id=「left」的div內容的意思就是要在左邊顯示，而現在卻顯示在右邊了。雖然結果是你想要的，但是命名好像很彆扭的跟你做對。所以如果要對其進行語義化的命名我們可以這樣來：
<divid
="content"
>
<p>今天是個好天氣
p>
div>
<divid
="sidebar"
>
<p>我的一些**
p>
div>這樣命名為content就是內容，命名為sidebar就是邊欄，管它上竄下跳，左躲右藏，命名內容塊始終為包含內容，命名邊欄塊也始終包含邊欄。這個例子就是語義化命名的例項，很好理解吧。
看看我是怎麼給自己的**結構命名的：
結構命名為常用的英文單詞，多詞之前用-來分割。因為是個人部落格所以命名也就沒什麼其他特殊要求了。如果想看看其他的**的命名推薦各位用firebug，這是在firefox的乙個外掛程式，能很方面的檢視，修改和除錯**。
css類命名的語義化vs結構化方式
（這篇文章有很好的配圖幫助你理解語義化命名）
語義化有什麼優勢嗎？
語義化更有利於seo
有個很常見的例子是這樣的：在初學seo的時候你是不是經常用h1來突出你的標題，用strong來突出你的關鍵字，或許你不太在意，但這確實是語義化的體現。就目前的搜尋引擎來說並不能想訪客那樣很直觀的去檢視網頁，它只有分析的你原始碼來體現或猜測**要表達的內容。比如你想表達某篇文章的標題，你或許會這樣寫：
<訪客或許能理解你的意思，但搜尋引擎就要反覆揣摩了，更好的討好搜尋引擎我們可以這樣來寫：divid
="title"
>文章的標題
div>
<當然語義化還有其他優勢：h1>這是標題
h1>
一些資料：semantic code: what? why? how?
，4 ways css can improve your seo
語義化的更高體現-微格式
什麼是微格式呢？維基百科這樣給它定義的：
微格式（microformat），是通過語意相關讓內容人機可讀。網頁上的允許的微格式資料報括事件、人物、地點等，它可以被其他的軟體檢測到，並提取出相應的資訊，以及對資訊進行索引、搜尋、跨平台的參考，把這些資訊以其他形式重複使用或組合。維基百科上還有乙個例項我就不貼了，你可以到這裡從技術上來說，這些資料是一些語義標記，用標準的(x)html中的class名稱設定。他是開放、可用、自由的，可以被任何人使用。
看到。在往後，當搜尋引擎越來越重視微格式，在你的**上應用微格式肯定會為你加分不少。在應用和推廣微格式上面，我覺得wordpress做的非常的好，在之前應用了諸如：rel=」tag」，rel=」nofollow」,rel=」license」後，在公升級到wordpress2.8後我發現它在header處新增了這幾個：
微格式還有個很經典的例子就是名片的應用，它也就是通過一些很有語義的標記來描述個人資訊，如果你想折騰微格式還是有得折騰的，為了避免篇幅過長下面給出寫有用的了鏈結方便有興趣的繼續折騰。
微格式全功略hcard、hcalendar、hreview、xfn 輕鬆掌握
（這幾個微格式也就是主要來體現個人資訊，這篇來自ued163）。這裡也還有一系列的翻譯譯文http://www.mijia.org/blog/?p=152
能夠幫助你很好的理解微格式。
end～
tags:語義化
posted in web前端相關
2009/06/28
web語義化的理解
web語義化是指使用恰當語義的html標籤 class類名等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集並研究網頁的資訊，從而可以讀懂網頁的內容，然後將收集彙總的資訊進行分析，結果為人類所用 另一方面它可以讓開發人...
web語義化概述
2.所有元素與顯示效果無關 重點 元素展示到頁面中的效果應該由css決定 比如我在頁面中書寫乙個h1元素 瀏覽器中展示的效果為 而後我用css簡單更改了h1元素的效果 瀏覽器中展示效果 此時瀏覽器帶有的預設css樣式被我更改，此時的一級標題 哈哈哈 依舊是h1這個一級標籤，故此解釋元素展現到頁面中的...
semantic 如何理解 web 語義化？
lync.in 什麼是語義化？其實簡單說來就是讓機器可以讀懂內容。先 隨便扯扯。對於當前的 web 而言，html 是聯絡大多數 web 資源的紐帶，也是內容的載體。在 web 被剛剛設計出來的時候，tim berners lee 可能不會想到它現在會達到的規模以及深入到我們生活的那麼多方面。也許起...