HTML語義化標簽

劉珍

摘要：隨著Web2.0技術(shù)的出現(xiàn)，網(wǎng)站更趨向于HTML結(jié)構(gòu)與CSS表現(xiàn)分離。HTML5新增了一系列的語義化標簽來構(gòu)造網(wǎng)頁內(nèi)容，使得HTML頁面內(nèi)容更直觀，方便閱讀、理解、維護和搜索，并且更利于完美展現(xiàn)和推廣。

關(guān)鍵詞：Web2.0 HTML語義化標簽

引言

目前，HTML5比HTML4新增了更多的語義化標簽，包含了語義和結(jié)構(gòu)元素、表單元素、新多媒體元素、繪圖元素等。比如：header、footer、aside等。它們的出現(xiàn)和使用，非常利于網(wǎng)頁內(nèi)容的構(gòu)造。

（一）語義化標簽的由來

Web2.0被人們描述為“作為平臺的網(wǎng)絡(luò)”。它的出現(xiàn)，把網(wǎng)絡(luò)變成一個內(nèi)容互動的平臺，這對網(wǎng)頁設(shè)計具有重大的影響?；赪eb標準，Web2.0的網(wǎng)站更趨向于HTML結(jié)構(gòu)和CSS表現(xiàn)分離。分離結(jié)構(gòu)與表現(xiàn)的一個重要方面是使用語義化標簽來構(gòu)造網(wǎng)頁內(nèi)容，這恰恰也是Web2.0網(wǎng)站提倡的。

HTML提供網(wǎng)頁文檔的上下文結(jié)構(gòu)和含義。通俗來說HTML就是劃分頁面內(nèi)容。HTML標簽語義化，簡單來說，就是讓標簽有含義，給某塊內(nèi)容用上一個最恰當(dāng)最合適的標簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓大家非常直觀的認識標簽和屬性的作用與用途。不論是誰都能夠看懂這塊內(nèi)容是什么，并且有利于搜索引擎。

比如在HTML5問世之前，我們一般采用DIV標簽來表示頁面布局，但這些DIV標簽僅僅起到了布局、構(gòu)建外觀和結(jié)構(gòu)的作用，做為容器的DIV標簽只是定義了頁面的某個部分，并沒有什么實際意義（雖然我們可以通過注釋語句、CSS樣式中的id、class來指明、形容這塊內(nèi)容的意義和功能），僅僅是我們提供給瀏覽器的指令。但語義化標簽的出現(xiàn)，本身就指明一定的意義，即我們平常所說的“語義”。語義化其實就是用合理的HTML標記以及其特有的屬性去格式化文檔內(nèi)容。

HTML5的語義化標簽，是HTML5的研究者花費大量精力研究分析用戶的通用行為得來。如Google通過解析器瀏覽、分析上百萬頁面中的DIV標簽的id名稱、超十億的網(wǎng)頁和表格中最常見的類名，發(fā)現(xiàn)header、footer以及nav的類名最為普遍。

（二）語義化標簽的作用

編寫HTML文件時按照W3C提倡的語義化，根據(jù)內(nèi)容的結(jié)構(gòu)（內(nèi)容語義化），選擇合適的標簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，同時讓各種瀏覽器的爬蟲和機器更好地進行解析。比如某個項目里面的按鈕，開發(fā)者采用DIV標簽或SPAN標簽制作，并在上面用事件委托的形式綁定了一些點擊事件，測試時發(fā)現(xiàn)Safari瀏覽器不能正常實現(xiàn)預(yù)期的按鈕點擊效果。原因在于Safari瀏覽器認為DIV、SPAN標簽不是可以產(chǎn)生交互的元素，只接受直接在這些元素上綁定事件的操作，不認可、不支持在這些元素的事件委托形式的綁定事件。

1、增加了網(wǎng)頁對搜索引擎的友好性。

語義化標簽的使用，使得網(wǎng)頁具有良好的結(jié)構(gòu)和語義，提升網(wǎng)站對訪客的易用性，從而使網(wǎng)頁內(nèi)容能夠更自然、容易地被搜索引擎抓取，有助于它們建立索引并給予一個較高的權(quán)值，可進一步加強網(wǎng)站的推廣。

2、使HTML頁面結(jié)構(gòu)清晰，可讀性強。

語義化標簽的使用，使得內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)能很好地呈現(xiàn)。代碼可讀性好，比如title、label、alt往往被運用于名詞解釋、圖片信息、相關(guān)信息的解釋。

3、有利于SEO效果大大增強。

語義化標簽的使用，有助于頁面和搜索引擎建立良好溝通，有助于搜索引擎爬蟲更好地從頁面中抓取更多的有效信息，有助于瀏覽器的爬蟲和機器很好地對頁面進行解析，并且根據(jù)標簽的語義來確定上下文和各個關(guān)鍵字的權(quán)重。事實上SEO最有效的一種方法就是對網(wǎng)頁的HTML結(jié)構(gòu)進行重構(gòu)，這實質(zhì)上就是語義化。與此同時，行業(yè)機構(gòu)對語義化標簽的擴展和瀏覽器廠商在技術(shù)上的支持力度也逐漸提升。HTML5中新增的語義化標簽，在Chrome、opera、safari、firefox等瀏覽器中均得到很好支持。

4、支持更多設(shè)備能夠更完美的展現(xiàn)網(wǎng)頁（特別是對CSS支持較弱的設(shè)備）。

語義化標簽方便其他設(shè)備（如屏幕閱讀器、移動設(shè)備等）以語義的方式來渲染頁面。比如屏幕閱讀器會完全根據(jù)開發(fā)者的標記來“讀”頁面內(nèi)容。即使在沒有樣式CSS、CSS丟失或不能正常展現(xiàn)的情況下，頁面也能以一種文檔格式顯示，仍然呈現(xiàn)清晰結(jié)構(gòu)，并且容易閱讀甚至無障礙閱讀。因此對有視覺障礙的用戶更加友好，使用PDA、文字瀏覽器以及殘障人士將從中受益。這進一步加強了用戶體驗，可提升網(wǎng)站對訪客的易用性。

5、便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，同時便于團隊開發(fā)和維護。

語義化標簽更具有可讀性，這得使閱讀頁面源代碼的開發(fā)者更容易將網(wǎng)頁分塊，逐塊閱讀、理解和維護，迅速把握下一步開發(fā)網(wǎng)頁的重要動向。遵循W3C標準的開發(fā)團隊都遵循這個標準進行網(wǎng)頁開發(fā)，可以快速達成共識、減少差異化，大大縮短開發(fā)時間，提高開發(fā)效率。

現(xiàn)在很多大型公司的前端很注重標簽語義化，使用語義化標簽可以使開發(fā)團隊組員能夠很好的理解頁面結(jié)構(gòu)，便于維護頁面，不必再焦頭爛額的猜測這部分代碼代表什么內(nèi)容，省下了許多不必要的時間，所以在以后的頁面設(shè)計中，慢慢的將使用語義化標簽培養(yǎng)成一種習(xí)慣，可以方便很多開發(fā)者。

（三）語義化標簽的出現(xiàn)并不能完全棄用DIV標簽

HTML5提供給我們的語義化標簽對頁面構(gòu)造有非常重要的作用，但畢竟數(shù)量有限。因此雖然現(xiàn)在可以使用一些更精準的語義結(jié)構(gòu)元素來替換以前學(xué)過并且使用的DIV元素，但根據(jù)頁面的內(nèi)容構(gòu)造，頁面的有些區(qū)域仍然需要使用DIV元素。

參考文獻：

1、CSS從入門到精通（第2版）.曹方.化學(xué)工業(yè)出版社.2011

2、CSS+DIV網(wǎng)頁樣式布局從入門到精通.龍馬工作室.人民郵電出版社.2014.10

3、Web前端開發(fā)精品課HTML與CSS基礎(chǔ)教程.莫振杰.中國工信出版集團，人民郵電出版社.2016.3endprint