Html5語義化

• HTML與CSS區別

  類型	做用	關注
  HTML	結構層	網頁結構
  CSS	表示層	網頁樣式

因此使用html標籤時，更應該關注的是標籤的語義。樣式則由CSS負責。

• 類比WORD文檔

• 第一個標題是經過WORD文檔中預設的標題樣式實現的

  

• 第二個標題是經過修改字體樣式實現的

  

  二者都能實現一樣的樣式效果，那麼咱們爲何要使用標題樣式呢？ 由於預設的標題樣式賦予的標題意義是經過字體樣式修改方式沒有的。 那標題意義的字體到底有什麼做用呢？

  

  當我寫好一篇文章想要經過寫好的標題設置目錄時，這時的標題必定要設置成WORD文檔預設的標題。由於只有是真正意義上的標題才能設置成目錄，而不是那些長得像標題的‘標題’。

  

  這就好像在網頁的搜索引擎中，用heading的H1~H6設置的標題才能讓它知道這是一個標題，從而獲取網頁主要內容。

• 什麼是語義化?

就是用最恰當的標籤來展現內容。驗證語義化的方法就是去掉css樣式，而後看看頁面是否還有良好的可讀性。相信你們在剛開始學作網頁的時候都是使用大量的div和span。可是其實除了div不少更加合適的標籤應該被咱們在網頁中運用到。

• 語義化分類

• 結構語義化，可以讓用戶很好的閱讀，即便沒有css樣式，也能呈現清晰的結構

  標籤	內容
  <header>	頁眉標籤。能夠有多個，不只僅是一個頁面的頭部，也能夠是某個部分的頭部。
  <nav>	導航標籤。
  <main>	每一個頁面只能使用一次，並且不能被其餘標籤包圍
  <article>	文章標籤 能夠是一篇文章，一則用戶提交的評論，一個交互式的小部件或小工具或其餘獨立的內容項，例如新聞內容，電影評論，案例研究，產品描述等等。
  <section>	獨立內容區域。儘管定義爲一個「通用」的區塊，但不能與div混淆。語義上來講，section標記的是頁面中的特定的區域，而div則不傳達任何語義。若是是出於樣式的緣由要對內容添加一個容器，建議用div
  <aside>	附註欄標籤。重要引述，側欄，指向相關文章的一組連接（新聞網站）廣告 相關產品列表
  <footer>	頁腳標籤。 相關文檔的連接版權信息做者

• 標題語義化

1. h1~h6標題

   

   咱們關注的不該該是標題的樣式，更重要的應該的標題的語義。

由於經過css樣式進行渲染也能夠實現一個看起來像標題的樣式。可是對於瀏覽器來講並不知道它是一個標題，只是一個被渲染過的文本。這就比如WORD文檔中只有使用預設的標題才能設置目錄同樣，經過修改字體字號粗體樣式修改的樣式並不能轉換成目錄。

h1~h6重要性逐漸遞減，在網頁中h1的重要性僅次於<title></title>標題。從SEO角度考慮，搜索引擎在檢索網頁，首先要看的是<title>標題，經過標題來判斷網頁的主要內容。其次看的是<h1></h1>標題。被賦予的h1標題具備很高的權重。

• 圖片語義化

<figure>
   <img src="/01.JPG" alt="xxx" title="xxx"/>
   <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
複製代碼

• 1.alt:用來替換圖像，描述圖片。

  • 爲看不到文檔圖像的瀏覽者提供文字說明。好比盲人閱讀器就是根據語義來渲染圖片，讓閱讀器讀給他們聽，告訴他們這是什麼圖片。或者圖片加載失敗時也是顯示alt屬性內容。
  • 在語音輸入的場景下，念出alt的內容，就會自動聚焦到那些圖片。
  • 在搜索引擎中，根據alt理解圖片信息
  • 移動設備中，好比數據漫遊時，圖片會被關閉，這時alt屬性解釋圖片的意思。

• 2.title:對圖片的說明以及額外的補充（區別於alt）。ie中鼠標通過圖片時出現文字提示。

• 3.figcaption：圖註文字

  

• 表單語義化

<fieldset>//包裹，給表單分組
            <legend>//說明表單用途
                表單組標題
            </legend>
                <label for="name">名字</label>//讓說明文本和input標籤關聯起來
                <input type="text" name="">
        </fieldset>
    </form>
複製代碼

效果圖：

• 表格語義化

<table>
    <caption>表格標題</caption>
    <!--表頭-->
    <thead>
    <tr>
        <th>表頭單元格1</th>
        <th>表頭單元格2</th>
    </tr>
    </thead>
    <!--表身-->
    <tbody>
    <tr>
        <td>標準單元格1</td>
        <td>標準單元格2</td>
    </tr>
    <tr>
        <td>標準單元格1</td>
        <td>標準單元格2</td>
    </tr>
    </tbody>
    <!--表腳-->
    <tfoot>
    <tr>
        <td>標準單元格1</td>
        <td>標準單元格2</td>
    </tr>
    </tfoot>
</table>
複製代碼

標題用caption，表頭用thread，主體用tbody，尾部用tfoot。表頭通常與通常單元格分開，表頭用th,單元格用td。雖然加上表頭主體尾部的效果與沒加是同樣的，可是代碼更具備邏輯性，結構更加清晰。html語義結構特別重要，尤爲是在搜索引擎中。

• 總結：語義化優勢

• 易於用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利於SEO，搜索引擎根據標籤來肯定上下文和各個關鍵字的權重。
• 方便其餘設備解析，如盲人閱讀器根據語義渲染網頁
• 有利於開發和維護，語義化更具可讀性，代碼更好維護。