html5中有哪些語義化標簽

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

HTML語義化：

每個HTML標簽都有自己特定含義（語義），語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

看過一個比較形象的例子：

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

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

同樣，生活很多事物都有相似相同之處！該用什么標簽表示就用什么標簽表示，結構良好，更易人和搜索引擎理解。還有一點，就是便于開發和維護啊，看過好多網頁結構，各種想吐槽好嗎?各種混亂不堪，外觀表現的任務交由css去實現就行啦，不要為了外觀表現而布局！

語義化的意義與作用

• 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

• 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；

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

• 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

• 便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

語義化都注意什么？

• 盡可能少用無語義的p、span標簽等；使用HTML5中新增的較多強語義化標簽，；

• 不要使用樣式化標簽，如font、b、….等等等，完全可以用css實現樣式（再說HTML5中基本將此類“樣式化標簽”廢除了！）

• 強調文本，盡量使用strong標簽加強強調，em標簽設置斜體

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

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

• 每個input標簽對應的說明文本都需要使用label標簽，并且通過id屬性和相對應的input關聯起來。

HTML5語義化標簽：

1.header：標簽定義“網頁”或“section”的頁眉。

通常包含h2-h7元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。

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

或

<header>
    <hgroup>
        <h2>網站標題</h2>
        <h3>網站副標題</h3>
    </hgroup>
</header>

用法：

• 可以是“網頁”或任意“section”的頭部部分；

• 沒有個數限制。

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

2.nav：定義導航鏈接的部分。

<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>

用法：

• 用在整個頁面主要導航部分上，不合適就不要用nav元素；

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

注意：例如，在頁腳中通過會有一組鏈接，包括服務條款，首頁，版權聲明等，使用footer元素是最恰當的。

具體用途：傳統導航條、側邊欄導航、業內導航、翻頁操作等

3.footer標簽：代表“網頁”或“section”的頁腳。

通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。

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

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

用法：

• 可以是“網頁”或任意“section”的底部部分；

• 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

• 多用于包含服務條款，友情鏈接、作者信息、版權信息等

4. hgroup元素：“網頁”或“section”的標題

當元素有多個層級時，該元素可以將h2到h7元素放在其內，譬如文章的主標題和副標題的組合

<hgroup>
    <h2>主標題</h2>
    <h3>HTML 5</h3>
</hgroup>

用法：

• 如果只需要一個h2-h7標簽就不用hgroup

• 如果有連續多個h2-h7標簽就用hgroup

• 如果有連續多個標題和其他文章數據，h2-h7標簽就用hgroup包住，和其他文章元數據一起放入header標簽

5.section標簽：定義文檔中含有標題和段落的區域。（強調分段或分塊）

<section>
  <h2>section要包含標題</h2>
  <p>section要包含內容...</p>
</section>

用法：

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

• 當容器需要標題和內容時，建議使用section標簽，若只是普通的容器，應該用p元素較好！section標簽非p！

6.article：代表獨立、完整、可獨自被外部引用的內容（博客或報刊中的文章、一遍論壇帖子、一段用戶評論或獨立的插件、或任何獨立的內容）;（強調的是獨立性！可含有完整的標題、內容、腳注)

<article>
   <header>
     <h2>標題處</h2>
   </header>
   <p>內容描述</p>
   <footer>腳部聲明標注</footer>
</article>

用法：定義一個獨立完整的內容部分（可包含標題，內容，腳注）時使用！

article、section間的相互嵌套關系：

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

1.用于article標簽之內，此時表示的是該獨立內容的附屬信息部分；

<article>
        <p>article內容區</p>
        <aside>
            <span>附屬信息1</span>
            <span>附屬信息2</span>
            <span>附屬信息3</span>
        </aside>
    </article>

2.用于article標簽之外，此時作為頁面或站點全局的附屬信息部分。

    <aside>
        <h2>附屬信息標題</h2>
        <a href="#">附屬信息...</a>
        <a href="#">附屬信息...</a>
        <a href="#">附屬信息...</a>
    </aside>

用法：

• aside在article內表示主要內容的附屬信息

• 在article之外則可做側邊欄，頁面或站點全局的附屬信息部分

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

（一句話概括：不同的位置表示為對應區域的附屬信息！）

8. figure標簽：規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figcaption標簽：用于元素定義figure的標題。

1.一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。

2.figcaption 元素應該被置于 figure元素的第一個或最后一個子元素的位置。

    <figure>
        <figcaption>figure的標題</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

9. time標簽：定義時間或日期

<p>定義時間...<time>9:00</time></p>

<p>結合datetime屬性定義日期...<time datetime="2016-08-08">時間</time></p>

10. address標簽：代表區塊容器，必須是作為聯系信息出現，郵編地址、郵件地址等等,一般出現在footer。

表示文檔或文章的作者/擁有者的聯系信息，在body標簽中表示文檔的作者的聯系信息；在article標簽中表示文章作者的聯系信息；

用法：

• 標簽不應該用于描述通訊地址，除非它是聯系信息的一部分。

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

關于html5中有哪些語義化標簽就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。