語義化是html5新特性嗎

小編給大家分享一下語義化是html5新特性嗎，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

語義化是html5新特性，其作用為：1、讓頁面能呈現出更好地內容結構、代碼結構；2、提升用戶體驗感；3、有利于SEO；4、讓瀏覽器的爬蟲和機器更好地解析；5、便于團隊開發和維護。

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

1、什么是HTML語義化？

基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調（strong em）等等>

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

2、為什么要語義化？有什么用？

• 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構：為了裸奔時好看；

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

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

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

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

3、寫HTML代碼時應注意什么？

• 盡可能少的使用無語義的標簽p和span；

• 在語義不明顯時，既可以使用p或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

• 不要使用純樣式標簽，如：b、font、u等，改用css設置。

• 需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

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

• 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；

• 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

4、HTML5新增了哪些語義標簽，詳述之。

1）、<section></section>

定義文檔中的主體部分的節、段。

2）、<article></article>

一個特殊的section標簽，比section有更明確的語義。定義來自外部的一個獨立的、完整的內容塊，例如什么論壇的文章，博客的文本。。。

3）、<aside></aside>

用來裝載頁面中非正文的內容，獨立于其他模塊。例如廣告、成組的鏈接、側邊欄。。。

4）、<header></header>

　     定義文檔、頁面的頁眉。通常是一些引導和導航信息，不局限于整個頁面頭部，也可以用在內容里。

5）、<footer></footer>

　     定義了文檔、頁面的頁腳，和header類似。

6）、<nav></nav>

　    定義了一個鏈接組組成的導航部分，其中的鏈接可以鏈接到其他網頁或者當前頁面的其他部分。

7）、<hgroup></hgroup>

　    用于對網頁或區段(section)的標題元素(h2~h7)進行組合。

8）、<figure></figure>

　    用于對元素進行組合。

9）、<figcaption></figcaption>

　    為figure元素加標題。一般放在figure第一個子元素或者最后一個。

10）、<details></details>

　    定義元素的細節，用戶可以點擊查看或者隱藏。

11）、<summary></summary>

　    和details連用，用來包含details的標題。

12）、<canvas></canvas>

　    用來進行canvas繪圖。

13）、<video></video>

　    定義視頻。

14）、<audio></audio>

　    定義音頻。

15）、<embed></embed>

　    定義嵌入網頁的內容。比如插件。

16）、<source></source>

　    該標簽為媒介元素(比如video、audio)定義媒介元素。

17）、<datalist id='dl'></datalist>

　    定義可選數據的列表，與input配合使用(<input list='dl'>)可制作輸入值的下拉列表。

18）、<mark></mark>

　    在視覺上向用戶展現出那些想要突出的文字。比如搜索結果中向用戶高亮顯示搜索關鍵詞。

19）、<meter [min/max/low/high/optimum/value]></meter>

　    度量衡，用紅黃綠表示出一個數值所在范圍。

20）、<output></output>

　    定義不同類型的輸出，樣式與span無異。

21）、<progress></progress>

　    進度條，運行中的進度。

22）、<time></time>

　    定義日期或者時間。

23）、<keygen></keygen>

　    定義加密內容。

24）、<command></command>

　    定義命令行為。

以上是“語義化是html5新特性嗎”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！