HTML5語義化标簽的了解

介紹

HTML是提供網頁文檔内容的上下文結構和含義；HTML本身是沒有表現的，我們看到的例如<H3>是粗體，字号為2em；<strong>的加粗，不要認為這些是html的表現，這是html的預設樣式在起作用，是以我們要知道html和頁面的表現是沒有關系的，表現是CSS的事。html在頁面中的作用是結構、含義，說白了就是劃分内容，這裡放什麼，我們放的是什麼。

結構化

一個頁面比作房子，那HTML就是鋼筋混凝土的牆，房蓋房梁一樣的架子；而CSS就是裝飾材料，地闆油漆一類的東西。好的頁面結構就是在沒有CSS裝飾的情況下，頁面結構依然清晰明了，房屋依然可現。而人們常說的DIV+CSS，隻是通俗的說法，并不是通篇的DIV，記住：DIV不是神！

語義化

HTML是一種對文本内容和意義（即語義）的補充說法。它會告訴我們說：“這行是一個标題，這幾行組成一個段落，這是一個項目清單，那是一個連結。”而不是來告訴我們：“這些字是藍色的，那些又是紅色的，這部分内容靠右，這幾個是斜體。”這些是CSS的工作。總之：HTML告訴我們一塊内容是什麼（或其意義），而不是它長什麼樣子。

複制代碼代碼如下:

<!--未語義化-->

<div id="header">

<div class="H3">前磚攻城師</div>

<div class="h2">搭積木也要玩藝術</div>

</div>

<!--語義化之後-->

<div id="header">

<H3>前磚攻城師</H3>

<h2>搭積木也要玩藝術</h2>

</div>

語義化的好處？

1. 去掉樣式能讓頁面結構呈現清晰
2. 螢幕閱讀器會按标記“讀”你的網頁
3. 有益于SEO
4. 便于團隊開發和維護

附:HTML5新增元素

标簽	含義	與html4對照
<article>	标簽定義外部的内容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源内容	HTML5:<article></article> HTML4:<div></div>
<section>	标簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。	HTML5: <section></section> HTML4: <div></div>
<aside>	标簽定義 article 以外的内容。aside 的内容應該與 article 的内容相關。	HTML5:<aside>Aside 的内容是獨立的内容，但應與文檔内容相關。</aside> HTML4:<div>Aside 的内容是獨立的内容，但應與文檔内容相關。</div>
<header>	标簽定義 section 或 document 的頁眉。	HTML5: <header></header> HTML4: <div></div>
<footer>	标簽定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系資訊。	HTML5: <footer></footer> HTML4: <div></div>
<hgroup>	标簽用于對網頁或區段（section）的标題進行組合。	HTML5: <hgroup></hgroup> HTML4: <div></div>
<nav>	标簽定義導航連結的部分	HTML5: <nav></nav> HTML4:<ul></ul>
<canvas>	标簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了用戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。	HTML5:<canvas id="myCanvas" width="200" height="200"></canvas> HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<video>	标簽定義視訊，比如電影片段或其他視訊流。	HTML5: <video src="movie.ogg" controls="controls">您的浏覽器不支援 video 标簽。</video> HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
<audio>	标簽定義聲音，比如音樂或其他音頻流。	HTML5:<audio src="someaudio.wav">您的浏覽器不支援 audio 标簽。</audio> HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<embed>	标簽定義嵌入的内容，比如插件。	HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>
<source>	标簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。	HTML5: <source> HTML4: <param>
<datalist>	标簽定義可選資料的清單。與 input 元素配合使用，就可以制作出輸入值的下拉清單。	HTML5: <datalist></datalist> HTML4: none
<details>	标簽定義元素的細節，使用者可進行檢視，或通過點選進行隐藏。與 <legend> 一起使用，來制作 detail 的标題。該标題對使用者是可見的，當在其上點選時可打開或關閉 detail。	HTML5: <details></details> HTML4: <dl style="display:hidden"></dl>
<summary>	标簽包含 details 元素的标題，”details” 元素用于描述有關文檔或文檔片段的詳細資訊。”summary” 元素應該是 “details” 元素的第一個子元素。	HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none
<figure>	标簽用于對元素進行組合。使用 <figcaption> 元素為元素組添加标題。	HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure> HTML4: <dl><H3>PRC</H3><p>The People's Republic of China was born in 1949...</p></dl>
<figcaption>	标簽定義 figure 元素的标題。”figcaption” 元素應該被置于 “figure” 元素的第一個或最後一個子元素的位置。	HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none
<mark>	主要用來在視覺上向使用者呈現那些需要突出的文字。<mark>标簽的一個比較典型的應用就是在搜尋結果中向使用者高亮顯示搜尋關鍵詞。	HTML5: <mark></mark> HTML4: <span></span
<meter>	标簽定義度量衡。僅用于已知最大和最小值的度量。必須定義度量的範圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。	HTML5: <meter></meter> HTML4: none
<output>	标簽定義不同類型的輸出，比如腳本的輸出。	HTML5: <output></output> HTML4: <span></span>
<progress>	标簽運作中的程序。可以使用 <progress> 标簽來顯示 JavaScript 中耗費時間的函數的程序。	HTML5: <progress></progress> HTML4: none
<time>	标簽定義日期或時間，或者兩者。	HTML5: <time></time> HTML4: <span></span>
<keygen>	标簽用于對網頁或區段（section）的标題進行組合	HTML5: <keygen> HTML4: none
<command>	标簽定義指令按鈕，比如單選按鈕、複選框或按鈕。	HTML5: <command οnclick=cut()" label="cut"> HTML4: none