HTML語義化標簽

劉珍

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

關鍵詞：Web2.0 HTML語義化標簽

引言

目前，HTML5比HTML4新增了更多的語義化標簽，包含了語義和結構元素、表單元素、新多媒體元素、繪圖元素等。比如：header、footer、aside等。它們的出現和使用，非常利于網頁內容的構造。

（一）語義化標簽的由來

Web2.0被人們描述為“作為平臺的網絡”。它的出現，把網絡變成一個內容互動的平臺，這對網頁設計具有重大的影響。基于Web標準，Web2.0的網站更趨向于HTML結構和CSS表現分離。分離結構與表現的一個重要方面是使用語義化標簽來構造網頁內容，這恰恰也是Web2.0網站提倡的。

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

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

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

（二）語義化標簽的作用

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

1、增加了網頁對搜索引擎的友好性。

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

2、使HTML頁面結構清晰，可讀性強。

語義化標簽的使用，使得內容結構和代碼結構能很好地呈現。代碼可讀性好，比如title、label、alt往往被運用于名詞解釋、圖片信息、相關信息的解釋。

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

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

4、支持更多設備能夠更完美的展現網頁（特別是對CSS支持較弱的設備）。

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

5、便于開發者閱讀和寫出更優雅的代碼，同時便于團隊開發和維護。

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

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

（三）語義化標簽的出現并不能完全棄用DIV標簽

HTML5提供給我們的語義化標簽對頁面構造有非常重要的作用，但畢竟數量有限。因此雖然現在可以使用一些更精準的語義結構元素來替換以前學過并且使用的DIV元素，但根據頁面的內容構造，頁面的有些區域仍然需要使用DIV元素。

參考文獻：

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

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

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