HTML 語義化佈局概述

本文並不會對HTML語義化佈局的具體細節做介紹，而是從巨集觀角度分析它的必要性。

HTML5標準新增若干語義化標籤，隨著HTML5的逐漸推廣，語義化佈局得到越來越多的重視。

當然語義化佈局不是HTML5的專利，比如<p>、<h1>或者<h2>等都是語義化標籤。

一.語義化佈局的目的：

顧名思義，所謂語義化佈局就是讓標籤具有一定的語義。

能夠讓程式設計師、搜尋引擎或者其他裝置能夠讀懂標籤的意義。

HTML的目的是實現頁面的佈局，即便不遵照語義化原則對於瀏覽器渲染基本沒有影響。

但是語義化佈局更具有優勢，以至於HTML5標準新增大量語義化標籤。

語義化佈局優點羅列如下：

（1）.語義化佈局對於團隊開發更為有利，否則難以閱讀對方程式碼。

（2）.對於搜尋引擎優化具有重要意義，智慧的搜尋引擎能夠從不同的標籤中獲取不同資訊。

（3）.方便特殊裝置的解析，比如盲人閱讀器。

（4）.讓HTML程式碼更具有結構化佈局。

HTML5之前，語義化佈局雖然雖然沒有當前靈活，但是語義化佈局觀念已經被廣為接受，且應用於實踐。

看一個大家可能都比較熟悉的佈局結構：

這是HTML5之前常見的佈局結構，div標籤本身沒有任何含義，但通過為期id賦予有意義的值。

上述就是典型的語義化佈局思想的應用，對於團隊合作開發具有重要意義，搜尋引擎可能辨識起來有點困難。

根據以往佈局的經驗，HTML5標準直接給出了對應的標籤，圖示如下：

上面是直接使用HTML5新增的標籤進行相關佈局，搜尋引擎等更容易識別。

二.語義化標籤的分類：

語義化標籤可以分為兩大類：|

（1）.純語義化標籤，無功能。

（2）.具有語義，且具有功能。

header是純語義化標籤，沒有其他特殊的功能，datalist標籤本身具有語義，且自帶一些特殊的功能。

本文不會列舉兩大類具體包含哪些標籤，可以自行在網路上查詢，關鍵在於對概念理解，達到舉一反三的目的。

三.HTML佈局注意事項：

（1）.儘量做到語義化佈局，而不是使用無語義的標籤。

（2）.但是不要誤以為div或者span等無語義話標籤已經失去意義，在單純作為容器的場景下十分有用。

（3）.如果需要對文字進行強調，那麼建議使用<strong>或者<em>，而不是使用<b>或者<i>。

（4）.input標籤對應的說明文字儘量使用label標籤。

（5）.如果使用<table>表格，那麼儘量發揮表格相關元素的對應作用，比如<th>、<thead>或者<tfoot>。

本文對HTML語義化佈局進行了簡單的概述，目的是讓讀者明確語義化佈局的意義。

關於HTML5新增語義化標籤的使用可以參閱HTML教程板塊的相關內容。