HTML語義化

以前我一直沒有重視過HTML語義化，以爲<div>+<span>，再用上一些基本的語義化標籤，好比<p>,<h1>等等，寫一些比較普通的頁面足夠了。可是，咱們應當追求把語義化標籤用對，而不是僅僅完成一個頁面就行。

那麼，爲何要使用HTML語義化呢？
1.爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構（爲了裸奔時好看）。
2.加強用戶體驗，例如title、alt屬性用於解釋名詞或解釋圖片信息（如圖，左邊爲title的效果，右邊爲alt的效果)。

3.有利於SEO(Search Engine Optimization,搜索引擎優化)，和搜索引擎（如百度、谷歌等）創建良好溝通，有助於爬蟲抓取更多的有效信息。爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重。
4.方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以其意義來渲染網頁。
5.便於團隊開發和維護，語義化更具可讀性，能夠減小差別化。

 

寫HTML代碼時應注意什麼？
1.儘量少的使用無語義的標籤div和span；
2.在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
3.不要使用純樣式標籤，如：<b>、<font>等，改用css設置。
4.須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
5.使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
6.表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

 

HTML5新增了不少語義化標籤，咱們來學習下經常使用的標籤。

1.<header>是頭部，裏面可使用<hgroup>存放多個標題，與之相對，<footer>表示頁腳。

 <header>
    <hgroup>
        <h1>網站標題</h1>
        <h1>網站副標題</h1>
    </hgroup>
</header>

2.<nav>爲導航部分。

<nav>
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

3.<article>爲文章，<section>爲段落，<aside>爲側邊欄。

 

此外，還有不少語義化的標籤，如：

1.<time>定義時間和日期，以機器可讀的方式對日期或時間進行編碼，這樣一些軟件能夠把用戶生日或者時間自動添加到日程表中，標籤不會在瀏覽器中呈現任何效果。

2.<audio> 定義一個音頻，<video> 定義一個視頻。

3.<small> 被包含的內容呈現小號字體。

4.<main> 規定文章的主要內容，標籤中的內容在文章中應當是惟一的，不包含在文檔中重複出現的內容。（一個文檔中只能有一個<main>，而且其不能是<article>,<aside>,<footer>,<header>,<nav>的後代）

5.<q> 標記一個短的引用，<blockquote> 用來標記長的引用，定義引用塊。被引用的部分先後會添加換行，而且增長外邊距。

還有不少語義化的標籤，平常須要多加積累。