html5中有哪些語義化標(biāo)簽

這篇文章給大家介紹html5中有哪些語義化標(biāo)簽，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

HTML語義化：

每個(gè)HTML標(biāo)簽都有自己特定含義（語義），語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

看過一個(gè)比較形象的例子：

蓋一棟房子的時(shí)候，有的地方該用磚頭，有的部分該用瓷片，還有的地方得用水泥糊上，這樣蓋出來房子才會(huì)結(jié)實(shí)，整潔和美觀。

如果硬是要瓷片替代磚頭，房子勉強(qiáng)也能蓋起來，但是這樣的房子不牢固，容易倒塌，外觀也不好看。

同樣，生活很多事物都有相似相同之處！該用什么標(biāo)簽表示就用什么標(biāo)簽表示，結(jié)構(gòu)良好，更易人和搜索引擎理解。還有一點(diǎn)，就是便于開發(fā)和維護(hù)啊，看過好多網(wǎng)頁結(jié)構(gòu)，各種想吐槽好嗎?各種混亂不堪，外觀表現(xiàn)的任務(wù)交由css去實(shí)現(xiàn)就行啦，不要為了外觀表現(xiàn)而布局！

語義化的意義與作用

• 去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

• 用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；

• 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

• 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；

• 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

語義化都注意什么？

• 盡可能少用無語義的p、span標(biāo)簽等；使用HTML5中新增的較多強(qiáng)語義化標(biāo)簽，；

• 不要使用樣式化標(biāo)簽，如font、b、….等等等，完全可以用css實(shí)現(xiàn)樣式（再說HTML5中基本將此類“樣式化標(biāo)簽”廢除了?。?/p>

• 強(qiáng)調(diào)文本，盡量使用strong標(biāo)簽加強(qiáng)強(qiáng)調(diào)，em標(biāo)簽設(shè)置斜體

• 表格書寫規(guī)范：標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

• 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；(說實(shí)話，這個(gè)倒真沒怎么注意到！)

• 每個(gè)input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過id屬性和相對應(yīng)的input關(guān)聯(lián)起來。

HTML5語義化標(biāo)簽：

1.header：標(biāo)簽定義“網(wǎng)頁”或“section”的頁眉。

通常包含h2-h7元素或hgroup，作為整個(gè)頁面或者一個(gè)內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。

<header>
     <h2>畢業(yè)生實(shí)習(xí)</h2>
     <span>2016/08/05</span>
</header>
<!--之前使用的是無語義的div+class-->
<div class='header'>...</div>

或

<header>
    <hgroup>
        <h2>網(wǎng)站標(biāo)題</h2>
        <h3>網(wǎng)站副標(biāo)題</h3>
    </hgroup>
</header>

用法：

• 可以是“網(wǎng)頁”或任意“section”的頭部部分；

• 沒有個(gè)數(shù)限制。

• 如果hgroup或h2-h7自己就能工作的很好，那就不要用header。

2.nav：定義導(dǎo)航鏈接的部分。

<nav>
    <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>
<!--之前使用的是無語義的div+class-->
<div class='nav'>...</div>

用法：

• 用在整個(gè)頁面主要導(dǎo)航部分上，不合適就不要用nav元素；

• 可用作頁面導(dǎo)航的鏈接組，并不是所有的鏈接組都要放進(jìn)nav元素中，只需將主要、基本的鏈接組放進(jìn)其中；

注意：例如，在頁腳中通過會(huì)有一組鏈接，包括服務(wù)條款，首頁，版權(quán)聲明等，使用footer元素是最恰當(dāng)?shù)摹?/p>

具體用途：傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、業(yè)內(nèi)導(dǎo)航、翻頁操作等

3.footer標(biāo)簽：代表“網(wǎng)頁”或“section”的頁腳。

通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。

如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

<footer>
  作者：xxxx <br />
 Copyright ? xxx.All rights reserved.
</footer>
<!--之前使用的是無語義的div+class-->
<div class='footer'>...</div>

用法：

• 可以是“網(wǎng)頁”或任意“section”的底部部分；

• 沒有個(gè)數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。

• 多用于包含服務(wù)條款，友情鏈接、作者信息、版權(quán)信息等

4. hgroup元素：“網(wǎng)頁”或“section”的標(biāo)題

當(dāng)元素有多個(gè)層級時(shí)，該元素可以將h2到h7元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合

<hgroup>
    <h2>主標(biāo)題</h2>
    <h3>HTML 5</h3>
</hgroup>

用法：

• 如果只需要一個(gè)h2-h7標(biāo)簽就不用hgroup

• 如果有連續(xù)多個(gè)h2-h7標(biāo)簽就用hgroup

• 如果有連續(xù)多個(gè)標(biāo)題和其他文章數(shù)據(jù)，h2-h7標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

5.section標(biāo)簽：定義文檔中含有標(biāo)題和段落的區(qū)域。（強(qiáng)調(diào)分段或分塊）

<section>
  <h2>section要包含標(biāo)題</h2>
  <p>section要包含內(nèi)容...</p>
</section>

用法：

• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實(shí)際意義的就用p

• 當(dāng)容器需要標(biāo)題和內(nèi)容時(shí)，建議使用section標(biāo)簽，若只是普通的容器，應(yīng)該用p元素較好！section標(biāo)簽非p！

6.article：代表獨(dú)立、完整、可獨(dú)自被外部引用的內(nèi)容（博客或報(bào)刊中的文章、一遍論壇帖子、一段用戶評論或獨(dú)立的插件、或任何獨(dú)立的內(nèi)容）;（強(qiáng)調(diào)的是獨(dú)立性！可含有完整的標(biāo)題、內(nèi)容、腳注)

<article>
   <header>
     <h2>標(biāo)題處</h2>
   </header>
   <p>內(nèi)容描述</p>
   <footer>腳部聲明標(biāo)注</footer>
</article>

用法：定義一個(gè)獨(dú)立完整的內(nèi)容部分（可包含標(biāo)題，內(nèi)容，腳注）時(shí)使用！

article、section間的相互嵌套關(guān)系：

7. aside標(biāo)簽：表示當(dāng)前頁面或文章的附屬信息部分，可包含于當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條、以及其他類似的有別于主要內(nèi)容的部分。

1.用于article標(biāo)簽之內(nèi)，此時(shí)表示的是該獨(dú)立內(nèi)容的附屬信息部分；

<article>
        <p>article內(nèi)容區(qū)</p>
        <aside>
            <span>附屬信息1</span>
            <span>附屬信息2</span>
            <span>附屬信息3</span>
        </aside>
    </article>

2.用于article標(biāo)簽之外，此時(shí)作為頁面或站點(diǎn)全局的附屬信息部分。

    <aside>
        <h2>附屬信息標(biāo)題</h2>
        <a href="#">附屬信息...</a>
        <a href="#">附屬信息...</a>
        <a href="#">附屬信息...</a>
    </aside>

用法：

• aside在article內(nèi)表示主要內(nèi)容的附屬信息

• 在article之外則可做側(cè)邊欄，頁面或站點(diǎn)全局的附屬信息部分

• 如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用

（一句話概括：不同的位置表示為對應(yīng)區(qū)域的附屬信息！）

8. figure標(biāo)簽：規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

figcaption標(biāo)簽：用于元素定義figure的標(biāo)題。

1.一個(gè)figure元素內(nèi)最多只允許放置一個(gè)figcaption元素，其他元素可無限放置。

2.figcaption 元素應(yīng)該被置于 figure元素的第一個(gè)或最后一個(gè)子元素的位置。

    <figure>
        <figcaption>figure的標(biāo)題</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

9. time標(biāo)簽：定義時(shí)間或日期

<p>定義時(shí)間...<time>9:00</time></p>

<p>結(jié)合datetime屬性定義日期...<time datetime="2016-08-08">時(shí)間</time></p>

10. address標(biāo)簽：代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。

表示文檔或文章的作者/擁有者的聯(lián)系信息，在body標(biāo)簽中表示文檔的作者的聯(lián)系信息；在article標(biāo)簽中表示文章作者的聯(lián)系信息；

用法：

• 標(biāo)簽不應(yīng)該用于描述通訊地址，除非它是聯(lián)系信息的一部分。

• 元素通常連同其他信息被包含在 footer 元素中。

關(guān)于html5中有哪些語義化標(biāo)簽就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。