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

本教程操作環(huán)境：windows10系統(tǒng)、HTML5版本、Dell G3電腦。

什么是html5標(biāo)簽語義化

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

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

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

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

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

3. 根據(jù)內(nèi)容的結(jié)構(gòu)化 (內(nèi)容語義化), 選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀, 和寫出更優(yōu)雅的代碼的同時, 讓爬蟲和瀏覽器很好地解析 。

以下是常見的語義化標(biāo)簽及其作用

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

總結(jié)語義化優(yōu)點：

易于用戶閱讀，樣式丟失的時候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。

有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。

方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁

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

（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）