碎碎念

這兩天正好看到一個經典面試題『HTML語義化是什麼意思？』，心想正好在梳理HTML知識，為了不心虛，遂想寫一篇部落格來嘗試說清楚語義化。

隨著資料越看越多，最後終於翻牆看到W3C對標籤的定義，越發覺得人類的語言是一門藝術，HTML5推動下的標籤語義化也是在適應越來越多的具體使用場景，換句話說，標籤語義化協助下的內容語義化表達，會推動自然語言處理，AI智慧，進而提高機器處理分析WEB的能力。

上述純屬扯淡，以下的內容也均為學習過程中的個人理解，若有誤解，懇請指出，謝謝！

什麼是語義化

網路上關於語義化的定義和說明很長很雜，看過了很多答案後，我嘗試一句話說清什麼是語義化。。。

語義化，

指對文字內容的結構化（內容語義化），選擇合乎語義的標籤（程式碼語義化），便於開發者閱讀，維護和寫出更優雅的程式碼的同時，讓瀏覽器的爬蟲和輔助技術更好的解析。

為什麼要關注語義化

透過使用恰當語義的HTML標籤，讓頁面具有良好的結構與含義，可以有效提高：

可訪問性：幫助輔助技術更好的閱讀和轉譯你的網頁，利於無障礙閱讀；

可檢索性：有了良好的結構和語義，可以提高搜尋引擎的有效爬取，提高網站流量；

國際化：全球只有13%的人口是英語母語使用者，因此通用的語義化標籤可以讓各國開發者更容易弄懂你網頁的結構；

互用性：減少網頁間的差異性，幫助其他開發者瞭解你網頁的結構，方便後期開發和維護；

被濫用的語義化標籤

以下是一些廣泛被濫用的語義化標籤：

blockquote

：一些人透過使用

標籤使文字達到縮排的目的，因為引用預設會進行文字縮排。如果你僅僅是想使文字達到縮排目的，而文字自身並非引用，那麼就用

CSS margin

來代替；

p

：一些開發者用

 ；

來為標籤自檢增加額外的空白段落，這裡應該使用

CSS margin/padding

來實現；

ul

：一些開發者往

中新增文字來達到文字縮排的目的，這種做法即不符合語義化要求，同樣也是非法的HTML實踐。

標籤中只能有

• 標籤。

  ~

  ：該標籤可以使文字字型變大，變粗，但如果文字並非是標題，應該使用CSS font-weight font-size；

  總結：其實上面四個例子都是為了說明一點，

  用正確的標籤做正確的事

  。

  語義化標籤介紹

  在HTML5出來之前，我們習慣於用`div

  來表示頁面的章節或者不同模組，但是

  `div`本身是沒有語義的。但是現在，HTML5中加入了一些語義化標籤，來更清晰的表達文件結構。

  

  一個沒有用div標籤佈局的頁面

  如上圖，這個頁面結構中摒棄了所有div元素，取而代之的是

  HTML5語義化標籤

  （用哪些標籤取決於你的設計目的）。

  同樣，W3C制定了這些語義化標籤，不可能完全符合我們的設計目標。我們的目標是為了能夠讓開發者或是爬蟲讀懂各個模組的語義化內容，因此，div作為一個沒有任何語義，僅僅是用來構建結構的元素，是最適合做容器的標籤。

  下面就讓我們把HTML5語義化標籤過一遍：

  定義文章的介紹資訊：標題，logo，slogan；包裹目錄部分，搜尋框，一個nav或者任何相關的logo；

  一個頁面中

  的個數沒有限制，可以為每個內容塊新增一個header；