在html5中，標簽語義化是指能夠更直觀的認識標簽和屬性的用途和作用；標簽語義化能夠易于用戶的閱讀，樣式丟失的時候能讓頁面有清晰的結構，有利于開發和維護，常見的語義化標簽有“<header>”、“<nav>”、“<main>”等等。

本教程操作環境：windows10系統、HTML5版本、Dell G3電腦。

什么是html5標簽語義化

語義化標簽的推出很好的解決了滿屏的 div 布局，語義化顧名思義就是能讓人一眼就看出來每一個標簽的作用和含義，使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓和搜索引擎都容易理解。一張圖就可以清晰的展示語義化標簽的作用，確實挺好，感覺像搭積木一樣，一塊一塊的把整體搭建出來。

“語義化”: 指的是機器在需要更少的人類干預的情況下, 能夠研究和收集信息; 讓網頁能夠被機器理解, 最終讓我們受益 。

HTML 標簽語義化: 是讓大家直觀的認識標簽(markup)和 屬性(attribute)的用途和作用 。

1. 很明顯 Hx 系列看起來很像標題, 因為擁有粗體和較大的字號 。

2. <strong>,<em> 用來加強語氣 。

3. 根據內容的結構化 (內容語義化), 選擇合適的標簽(代碼語義化)便于開發者閱讀, 和寫出更優雅的代碼的同時, 讓爬蟲和瀏覽器很好地解析 。

以下是常見的語義化標簽及其作用

<header>      <!--：頁眉通常包括網站標志、主導航、全站鏈接以及搜索框。--> <nav>           <!--：標記導航，僅對文檔中重要的鏈接群使用。--> <main>         <!--：頁面主要內容，一個頁面只能使用一次。--> <article>       <!--：定義外部的內容，其中的內容獨立于文檔的其余部分。--> <section>     <!--：定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其他部分。--> <aside>        <!--：定義其所處內容之外的內容。如側欄、文章鏈接、廣告、相關產品列表等。--> <footer>        <!--：頁腳，只有當父級是body時，才是整個頁面的頁腳。-->  <title>           <!--：頁面主體內容。--> <hn>             <!--：h1~h6，分級標題，<h1> 與 <title> 協調有利于搜索引擎優化。--> <ul>              <!--：無序列表。--> <li>               <!--：有序列表。--> <small>         <!--：呈現小號字體效果，指定細則，輸入免責聲明、注解、署名、版權。--> <strong>       <!--：和 em 標簽一樣，用于強調文本，但它強調的程度更強一些。--> <em>            <!--：將其中的文本表示為強調的內容，表現為斜體。--> <mark>         <!--：使用黃色突出顯示部分文本。--> <figure>        <!--：規定獨立的流內容（圖像、圖表、代碼等等）（默認有40px左右margin）。--> <cite>           <!--：表示所包含的文本對某個參考文獻的引用，比如書籍或者雜志的標題。--> <blockquoto> <!--：定義塊引用，塊引用擁有它們自己的空間。--> <q>                <!--：短的引述（跨瀏覽器問題，盡量避免使用）。--> <time>           <!--：datetime屬性遵循特定格式，文本必須是合法的時間格式。--> <abbr>          <!--：簡稱或縮寫。--> <dfn>             <!--：定義術語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。--> <address>     <!--：作者、或組織的聯系信息（電子郵件地址、指向聯系信息頁的鏈接）。--> <del>             <!--：移除的內容。--> <ins>             <!--：添加的內容。--> <code>         <!--：標記代碼。--> <meter>        <!--：定義已知范圍或分數值內的標量測量。（IE 不支持 meter 標簽）--> <progress>   <!--：定義運行中的進度（進程）。-->

總結語義化優點：

易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。

有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。

方便其他設備解析，如盲人閱讀器根據語義渲染網頁

有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。

（學習視頻分享：css視頻教程、html視頻教程）