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

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

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

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

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

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

1. 很明顯 Hx 系列看起來(lái)很像標(biāo)題, 因?yàn)閾碛写煮w和較大的字號(hào) 。

2. <strong>,<em> 用來(lái)加強(qiáng)語(yǔ)氣 。

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

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

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

總結(jié)語(yǔ)義化優(yōu)點(diǎn)：

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

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

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

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

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