HTML語義化
概念
官方解釋：
語義化是指用合理的HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器可以理解。
我的理解：
在我的理解中語義化就是讓我們寫的每一行代碼都有其意義，不僅僅是程序實現和功能上而言，還必須能被人和機器很好的理解。簡單的說就是你寫的代碼應該是兩全其美的，既要讓人讀懂也要讓機器讀懂。在HTML中就是告訴大家，每一個標籤都是有它獨特的意義的和應用場景的，而不是隨便想用就用，想用什麼替換就用什麼替換。
我認爲最好的理解就是將office中的Word與其對比。Word中從頭部頁眉、標題、正文再到頁腳都有單獨的樣式和設置，所以HTML也大同小異，就是爲了將網頁內容通過這些設置來呈現出來。包括我現在寫的文章是用Markdown來完成的，也是語義化的體現。
我將HTML的語義化分爲兩部分，一個是結構語義化，一個是標籤語義化，雖然這樣分會有點問題，但更有利於理解。
結構語義化
先從網頁的整個結構來說，最早的網頁就是來展現最基礎的新聞、文章之類的，只是現在的網頁設計更厲害了，在樣式上看着更加炫酷和多樣化，但本質上都是從最基本的結構做起的。可以先看看世界上最早的網頁是什麼樣子
![圖片上傳中...]
網頁的結構大致上可以從下面這個圖來理解：
代碼展現：
<body>
<!-- 頭部 -->
<header></header>
<!-- 頭部 -->
<!-- 導航 -->
<nav></nav>
<!-- 導航 -->
<!-- 主體內容 -->
<main>
<!-- 正文內容 -->
<article>
<!-- 章節 -->
<section>
<p></p>
</section>
<!-- 章節 -->
</article>
<!-- 正文內容 -->
<!-- 正文之外內容 -->
<aside></aside>
<!-- 正文之外內容 -->
</main>
<!-- 主體內容 -->
<!-- 底部 -->
<footer></footer>
<!-- 底部 -->
</body>標籤語義化
結構語義化不也就是將標籤語義化嗎？是的，但是單獨拉出來說是因爲除了整個網頁結構，其他更多的細節我們需要注意語義化。舉個例子,下面是騰訊某新聞版塊的網頁：
現在我們去掉其所有樣式後是這樣的：
再看看它的源代碼：
不難發現，在我們將其網頁的所有樣式都去掉之後，還是能清晰地讀完整篇文章，並且是層次分明的。這就是爲什麼要將標籤語義化。可以看到文章的標題用到了<h1>標籤，全文就這一個大標題。然後整篇文章用<p>標籤將文段分開，沒有用<div>，因爲<p>就代表一個段落，而<div>什麼都不代表。強調的部分用了<strong>標籤。大家知道CSS中的font-wight也可以加粗文字，HTML的<b>標籤也可以加粗文字，但是騰訊都沒有使用。因爲CSS在沒有樣式的時候就不管用了，<b>標籤沒有強調的意思，而<strong>的語義更明顯。
這樣的例子還有很多很多，比如W3C的官方網站，在去掉所有CSS樣式之後，還是能清楚地找到網頁的各個部分，瀏覽所需的內容，這就是一個優秀的網站應該做到的。
常用的語義化標籤（大部分擁有文本格式化的作用）：
-
<em>把文本定義爲強調的內容。 -
<strong>把文本定義爲語氣更強的強調的內容。 -
<dfn>定義一個定義項目。 -
<samp>定義樣本文本。 -
<kbd>定義鍵盤文本。 -
<var>定義變量。 -
<cite>定義引用。 -
<h1> to <h6>定義 HTML 標題。 -
<p>定義段落。 -
<address>定義文檔作者或擁有者的聯繫信息。 -
<blockquote>定義長的引用。 -
<mark>定義有記號的文本。 -
<q>定義短的引用。 -
<time>定義日期/時間。 -
<figure>定義媒介內容的分組，以及它們的標題。
更多請參考W3C：http://www.w3school.com.cn/ta...
好處
- 讓我們的網頁結構更加清晰，讓電腦和瀏覽器輕易地識別哪一部分是導航，哪一部分是正文，即使在沒有CSS修飾的情況下，我們也能清楚地看到整個網頁的結構。
- 對於SEO更加友好，利於搜索引擎對網站的收錄和評分。
- 利於人更好地理解代碼意思，因爲是W3C標準，只要你按照語義化使用標籤，全球任何國家的程序員都能看懂。
總結
踐行HTML語義化最好的方法就是秉承以下兩點：
- 如果沒有CSS樣式，網站內容是否能完整且清晰地展現出來，並準確表達各部分的意思。
- 如果看代碼的人不是我自己，別人是否能看懂我寫的標籤都是什麼意思。