反過(guò)來(lái)說(shuō)，我們現(xiàn)在使用的HTML4/XHTML，難道就不能語(yǔ)義化嘛？這點(diǎn)半對(duì)半不對(duì)。在HTML4/XHTML中，除了傳統(tǒng)的td,tr切版方式的網(wǎng)頁(yè)制作外，DIV+CSS的版面配置已經(jīng)逐漸受到重視。所以，一個(gè)基礎(chǔ)的網(wǎng)頁(yè)我們可能有這樣的配置。

嗯，看起來(lái)很熟悉吧。不過(guò)這是很基礎(chǔ)的DIV配置，還沒(méi)有做到語(yǔ)義化的目的，所以在HTML5出來(lái)前，依據(jù)W3C的規(guī)則，我們其實(shí)可以利用"id"這個(gè)元素，來(lái)幫我們的每個(gè)DIV「取名」，其實(shí)只要做到這一步，搜索引擎就已經(jīng)可以清楚辨識(shí)每個(gè)DIV的作用，并正確找到文章的重點(diǎn)，所以在HTML4/XHTML中的語(yǔ)義化實(shí)現(xiàn)是：

See，這樣用id來(lái)幫DIV命名，跟前一張圖相比較，連中文附注都不用，就可以很清楚知道版塊的用意，同樣的搜索引擎也能快速的了解網(wǎng)頁(yè)。但是在HTML5中，新增了header、article、section、footer、aside、nav等標(biāo)簽，來(lái)協(xié)助我們?cè)谑褂肏TML5做到更好的語(yǔ)義架構(gòu)，也更容易讓搜索引擎快速的了解一整頁(yè)的重點(diǎn)，所以從上圖的架構(gòu)來(lái)說(shuō)，利用HTML5來(lái)做編輯的話，可以調(diào)整為：

好了，我想從基礎(chǔ)架構(gòu)來(lái)說(shuō)，你應(yīng)該已經(jīng)知道HTML5下的語(yǔ)義架構(gòu)下，該怎么去調(diào)整自己的網(wǎng)站了吧！不過(guò)有幾個(gè)容易搞混的地方還是要提醒一下：

 ?所謂「標(biāo)簽」，在語(yǔ)義上就表示包含的內(nèi)容是具有意義的。所以不要遇到區(qū)塊就用section去包。像是Logo一些無(wú)意義的內(nèi)容，div還在，請(qǐng)善用。

 ?不要凡是遇到「列表」或是「導(dǎo)覽列」就用nav，個(gè)人的基本分類(lèi)原則：連站內(nèi)的再用nav，如果是要導(dǎo)航到外站的，請(qǐng)用section，或是div就好。