HTML5語義化標籤的理解
阿新 • • 發佈：2019-02-16
介紹
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>
語義化的好處？
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>
語義化的好處？
- 去掉樣式能讓頁面結構呈現清晰
- 螢幕閱讀器會按標記“讀”你的網頁
- 有益於SEO
- 便於團隊開發和維護
| 標籤 | 含義 | 與html4對照 |
| <article> | 標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文字，或者是來自論壇的文字。亦或是來自其他外部源內容 |
HTML5:<article></article> HTML4:<div></div> |
| <section> | 標籤定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分。 |
HTML5: 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 onclick=cut()" label="cut"> HTML4:none |