其實(shí)筆者接觸HTML語(yǔ)義化也不是很久，還記得第一次接觸竟然是被某網(wǎng)絡(luò)公司W(wǎng)EB前端招聘的HR問到，當(dāng)時(shí)真的很囧。所謂吃一塹，長(zhǎng)一智，筆者決定對(duì)WEB前端和SEO結(jié)合起來學(xué)習(xí)。什么是HTML語(yǔ)義化？如果大家對(duì)它也較為陌生，或者決定對(duì)下面的解釋理解起來有點(diǎn)吃力，可以參考下筆者在微博中給的通俗解釋。

分離結(jié)構(gòu)與表現(xiàn)的另一個(gè)重要方面是使用語(yǔ)義化的標(biāo)記來構(gòu)造文檔內(nèi)容。一個(gè)XHTML元素的存在就意味被標(biāo)記內(nèi)容的那部分有相應(yīng)的結(jié)構(gòu)化的意義，沒有理由使用其他的標(biāo)記。換句話說，不要讓CSS使一個(gè)HTML元素看起來就像另一個(gè)HTML元素，比如用＜div＞來代替＜p＞標(biāo)記標(biāo)題。

雖然語(yǔ)義化的HTML屬于WEB標(biāo)準(zhǔn)化范疇，值得WEB前端的設(shè)計(jì)者學(xué)習(xí)，但對(duì)于一個(gè)全面的SEO來說，使用標(biāo)準(zhǔn)化的網(wǎng)頁(yè)結(jié)構(gòu)，對(duì)SEO是有百利而無一害的，而WEB標(biāo)準(zhǔn)化就必須談到語(yǔ)義化的HTML。其實(shí)，應(yīng)該很容易想象，如果整個(gè)HTML文檔中，都只用div來布局、表現(xiàn)數(shù)據(jù)，那還需要其他的那些HTML標(biāo)簽做什么呢？可以這么說，語(yǔ)義化的HTML讓我們的網(wǎng)頁(yè)更加容易被人或者機(jī)器理解，更容易清楚的表達(dá)網(wǎng)頁(yè)的真實(shí)含義。下面，我們就來了解下SEO種需要重點(diǎn)注意的一些語(yǔ)義化HTML。

標(biāo)題＜Hx＞

＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞，在WEB中作為標(biāo)題使用，并且依據(jù)重要性遞減。＜h1＞是最高的等級(jí)，所以你需要準(zhǔn)確確定每個(gè)頁(yè)面最重要的內(nèi)容是什么，要優(yōu)化的關(guān)鍵詞在哪里。以我們最常見的博客為例，博客首頁(yè)羅列最多的通常就是最新博文，而最重要的應(yīng)該就是博客的名稱了，比如筆者的“筆者網(wǎng)絡(luò)推廣博客”，而后面最新文章的鏈接標(biāo)題則可以使用＜H2＞或者＜H3＞，一般都使用＜H2＞，表示次級(jí)標(biāo)題。

但是，是不是每個(gè)頁(yè)面的H1標(biāo)簽都包含博客名稱呢？建議次級(jí)頁(yè)面的博客名稱鏈接都放在H2標(biāo)簽里，而你的文章標(biāo)題則使用H1標(biāo)簽，這樣對(duì)于整站優(yōu)化是很有幫助的，這也是優(yōu)化到每個(gè)頁(yè)面需要注意的一點(diǎn)。通過合理設(shè)置每個(gè)頁(yè)面的hx標(biāo)題，網(wǎng)站的內(nèi)容才會(huì)更具優(yōu)勢(shì)。

強(qiáng)調(diào)＜em＞、＜strong＞、＜b＞、＜i＞

＜em＞、＜strong＞這兩個(gè)標(biāo)簽對(duì)SEO有著較大影響效果，適當(dāng)使用它們，可使你的網(wǎng)頁(yè)增色不少。＜em＞、＜strong＞與Hx一樣，其區(qū)別也在于重要性不一樣。＜em＞ 表示強(qiáng)調(diào)，而＜strong＞意為重點(diǎn)強(qiáng)調(diào)，較em更重一些。在SEO時(shí)，我們可以將最重要的關(guān)鍵詞用strong標(biāo)記，對(duì)第二重要的用em標(biāo)記。結(jié)合前面使用的Hx標(biāo)簽，它們更適合放在文章正文的內(nèi)部，而Hx理所當(dāng)然是在用在正文的外部。有些WEB設(shè)計(jì)者為了達(dá)到網(wǎng)頁(yè)的某些效果，使用＜strong＞純粹是為了達(dá)到加粗，使用em就是為了傾斜，而這種做法根本沒必要，而且相反可能會(huì)影響到SEO的效果。在以前，為了達(dá)到粗體、斜體的效果，WEB設(shè)計(jì)者會(huì)使用＜b＞、＜i＞標(biāo)簽，而現(xiàn)在基本不用它們了，它們僅僅是用來表現(xiàn)文本樣式的，而最明智和常用的解決方案是用CSS來控制文字樣式。

段落＜p＞

當(dāng)搜索引擎讀取網(wǎng)頁(yè)內(nèi)容的時(shí)候，遇到P標(biāo)簽的時(shí)候，立馬就知道這是一個(gè)段落，而如果使用DIV，就無法體現(xiàn)HTML語(yǔ)義化的優(yōu)勢(shì)了。從WEB標(biāo)準(zhǔn)的角度來看，文章正文使用P是理所當(dāng)然，也是更值得提倡的。不過如果使用＜div＞代替＜p＞，對(duì)SEO的影響還是甚微的，因?yàn)樗鼈儾]有任何強(qiáng)調(diào)的意味在里面。但是如果你使用P來給網(wǎng)頁(yè)整體布局，就顯得有些怪異了。

列表＜ul＞、＜o(jì)l＞、＜li＞、＜table＞

＜ul＞為無序列表，大家廣泛使用的，有序列表＜o(jì)l＞也挺常用。在web標(biāo)準(zhǔn)化過程中，＜ul＞被更多的用于導(dǎo)航條，這樣做是完全正確的，而在文章列表里面，就可以使用ol了，因?yàn)槟切┝斜矶际怯幸欢樞虻摹．?dāng)然，這兩個(gè)對(duì)于SEO的影響也是甚微的，但如果你使用表格＜table＞代替列表，不僅會(huì)使得HTML文檔變得冗長(zhǎng)，更沒能很好的利用HTML語(yǔ)義化的優(yōu)勢(shì)來優(yōu)化你的網(wǎng)頁(yè)，因?yàn)楸砀窀m合來標(biāo)記列表的數(shù)據(jù)。

title屬性（不是title標(biāo)簽）和alt屬性

title屬性是用來為元素提供額外說明信息的，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標(biāo)簽。alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA），指定替換文字。alt屬性對(duì)圖片優(yōu)化的功能是毋庸置疑的，而且這也是SEO所提倡的，如果你非用圖片到HTML里面去，最好將圖片加上ALT屬性，而且可以將關(guān)鍵詞適當(dāng)?shù)姆诺嚼锩嫒ァ０肽昵翱吹揭晃徊┯颜ftitle屬性（不是title標(biāo)簽）可以增加網(wǎng)站的關(guān)鍵詞密度，筆者在這里持有不同的觀點(diǎn)，因?yàn)楝F(xiàn)在ALT屬性里的值都已經(jīng)被搜索引擎輕視了，title里面的內(nèi)容對(duì)關(guān)鍵詞密度的影響也會(huì)被搜索引擎放低，同時(shí)。title屬性里的內(nèi)容并不一定能夠增加關(guān)鍵詞的密度，如果大量使用，且里面的內(nèi)容不含關(guān)鍵詞，相反會(huì)削弱關(guān)鍵詞密度。

也許這篇文章更適合SEO初學(xué)者來看，但是對(duì)于很多只懂鏈接和內(nèi)容操作的SEO來說，WEB標(biāo)準(zhǔn)還是應(yīng)該引起大家的注意。同時(shí)，對(duì)于WEB設(shè)計(jì)者來說，考慮HTML對(duì)網(wǎng)站SEO的影響，更應(yīng)該正確的使用你手下的HTML標(biāo)記。