語義化的優點：

• 易於使用者閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利於SEO，搜尋引擎根據標籤來確定上下文和各個關鍵字的權重。
• 方便其他裝置解析，如盲人閱讀器根據語義渲染網頁
• 有利於開發和維護，語義化更具可讀性，程式碼更好維護，與CSS3關係更和諧。

 1、<header>

    <header>定義文件或者文件的部分割槽域的頁首，應作為介紹內容或者導航連結欄的容器。

    在一個文件中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一個含有多個超連結的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的連結列表。

    在一個文件中，可定義多個<nav>元素。

    3、<main>

    <main> 定義文件的主要內容，該內容在文件中應當是獨一無二的，不包含任何在文件中重複的內容，比如側邊欄，導航欄連結，版權資訊，網站logo，搜尋框（除非搜尋框作為文件的主要功能）。

    需要注意的是在一個文件中不能出現多個<main>標籤。

    4、<article>

    <article>元素表示文件、頁面、應用或網站中的獨立結構，是可獨立分配的、可複用的結構，如在釋出中，它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。

    當<article>元素巢狀使用時，則該元素代表與外層元素有關的文章。例如，代表部落格評論的<article>元素可巢狀在代表部落格文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。

    6、<footer>

    <footer>定義最近一個章節內容或者根節點元素的頁尾。一個頁尾通常包含該章節作者、版權資料或者與文件相關的連結等資訊。

    使用footer插入聯絡資訊時，應在 footer 元素內使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文件中的一個區域（或節），比如，內容中的一個專題組。

    如果元素內容可以分為幾個部分的話，應該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便指令碼使用的時候，應使用<div>。

    這幾個標籤，比較容易混淆的是<section>、<article>，所以這裡特別說明：

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗來說就是<article>比<section>更具有獨立性、完整性。可通過該段內容脫離了所在的語境，是否完整、獨立來判斷。

8.<time>

定義時間或日期，time標籤中的datetime屬性定義的時間不會被顯示，但可能被其他應用使用

<time datetime="2018-01-17">今天是我生日</time>

9.<ruby>

加註釋，ruby標籤有兩個子元素，rt註釋的內容，rp是該標籤不顯示時顯示的文字

<ruby>
  人<rt>ren</rt>
  <rp>該標籤無法顯示</rp>
</ruby

10.<details>

用於描述文件或者文件某一部分細節，summary是details元素的標題

<details>
  <summary>點選檢視更多</summary>
  <p>這是點選後的內容</p>
</details>

11.<mark>

定義帶有幾號的文字，它會給你想要突出顯示的文字加個 背景色

<p>我最喜歡<mark>數學</mark></p>

12.<progress>

progress顯示資料的進度，屬性value指定當前值，max最大值，最小值0不用設定

<progress value="30" max="100"></progress>

13.<video>

定義視訊，屬性src引入資源，controls視訊的控制控制元件

<video src="" controls="controls">你的瀏覽器不支援video標籤</video>
以防使用者瀏覽的視訊不支援某些格式的視訊，可以為使用者多準備些格式的視訊
,目前支援的視訊格式video/ogg，video/mp4，video/webm其他格式需要轉換

<video controls="controls">
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  你的瀏覽器不支援video標籤
</video>

14.<audio>

該標籤可定義聲音，及其他的音訊檔案，不加controls不顯示音訊的控制介面

<audio src="" controls="controls">你的瀏覽器不支援audio標籤</audio>

<video controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx.mp3" type="audio/mpeg">
  你的瀏覽器不支援audio標籤
</video>

目前音訊可用型別audio/ogg，audio/mpeg
15.<datalist>

提示可能的值，datalist及其選項不會被顯示出來，它僅僅是合法輸入值的列表使用input元素的list屬性來邦定datalist，下面選項使用option定義

<input type="text" list="cars">
  <datalist id="cars">
      <option value="寶馬"></option>
      <option value="賓士"></option>
      <option value="奧迪"></option>
  </datalist>

16.<embed>

定義插入的內容，如外掛，flash，標籤中間不要加內容會顯現出來

<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>

17.<canvas>

canvas畫布只是個容器，你可以通過控制座標在canvas上繪製圖形，一般配合js可以實現非常複雜的動畫效果