什麼是HTML語意化？ html語意化的好處（總結）

本章要跟大家介紹什麼是HTML語意化？ html語意化的好處（總結），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是HTML語意化？

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

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

語意化的HTML結構到底有什麼好處？

我們知道HTML5新增的標籤，例如

和

，html正在朝著更健壯的語義化的HTML結構發展，xhtml2在這一點上沒html5先進，這也是xhtml2死亡的原因，這也說明了語意化的HTML結構是html的發展趨勢。

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

2. 使用者體驗：例如title、alt用來解釋名詞或解釋圖片訊息、label標籤的活用；

3. 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴標籤來確定上下文和各個關鍵字的權重；

4. #方便其他裝置解析（如螢幕閱讀器、盲讀器、行動裝置）以意義的方式來渲染網頁；

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

寫HTML程式碼時要注意什麼？

1. 盡可能少的使用無語義的標籤div和span；

2. 在語義不明顯時，既可以使用div或p時，盡量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；

3. 不要使用純樣式標籤，如：b、font 、u等，改用css設定。

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

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

6. #表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

7. 每個input標籤對應的說明文字都需要使用label標籤，並且透過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

HTML5新增了語意標籤

HTML 5的革新之一：語意化標籤一節元素標籤。

在HTML 5出來之前，我們用div來表示頁面章節，但這些div都沒有實際意義。 （即使我們用css樣式的id和class形容這塊內容的意義）。這些標籤只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒「意義」的標籤因為因為html5的出現而消失了，這就是我們平常說的「語意」。

看下圖沒有用div標籤來佈局

W3C定義了這些語意標籤，不可能完全符合我們有時的設計目標，就像是製定出來的法律不可能流傳100年都不改變，更何況它才制定沒多久，不可能這些語意標籤對所以設計目標的適應。只是一定程度上的“通用”，我們的目標是讓爬蟲讀懂重要的東西就夠了。

結論：不能因為有了HTML 5標籤就棄用了div，每個事物都有它的獨有作用的。

節點元素標籤因使用的地方不同，他們可分為：節元素標籤、文字元素標籤、分組元素標籤分開來講解HTML5中新增加的語意化標籤和使用總結。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

以上是什麼是HTML語意化？ html語意化的好處（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！