2.1 語意結構標籤

在還沒有 HTML5 之前，是單純使用 <div> 來創造頁面的各個區塊，如下圖：

但 <div> 本身是沒有語意的，不利於 SEO。所以在 HTML5 開始之後，有了新的規範，讓以上各個頁面區塊，重新賦予實際的意義：

<header>

通常表示的是一個頁面或區域一開始的引導內容。

例 1：

<body>
  <header>
    <!-- 其它 header 資訊 -->
  </header>
  
  <!-- 其它頁面內容 -->
</body>

例 2：

<article>
  <header>
    <h1>Most important heading here</h1>
    <h2>Less important heading here</h2>
    <p>Some additional information here</p>
  </header>
  
  <p>Lorem Ipsum dolor set amet....</p>
</article>

參考：HTML <header> Tag

<footer>

通常表示的是一份文件或區域的尾部內容。

例 1：

<body>
  <!-- 其它頁面內容 -->
  
  <footer>
    <!-- 其它 footer 資訊 -->
  </footer>
</body>

例 2：


<article>
  <!-- 其它內容 -->
  
  <p>Lorem Ipsum dolor set amet....</p>
  
  <footer>
    <p>Posted by: Hege Refsnes</p>
    <p>
      Contact information:
      <a href="mailto:someone@example.com">someone@example.com</a>.
    </p>
  </footer>
</article>

參考：HTML <footer> Tag

<nav>

代表該網站的主要導覽連結。就可以用 nav 標籤包起來。

例 1：

<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">JavaScript</a> |
  <a href="#">jQuery</a>
</nav>

例 2：

<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
  </ul>
</nav>

例：

參考：HTML <nav> Tag

<article>

主要表示的是一個獨立、擁有自有內容的一個區塊。

例：以下兩個 article 標籤，語意上，代表擁有自己的獨立內容。

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

參考：HTML <article> Tag

<section>

主要表示的是一個「區域」的概念。

另外，<header> 、 <footer> 、<aside> 也是屬於 <section> 的一種，

只是 <header>、<footer>、<aside> 比 <section> 更明確化。

例：

<body>
  <header>
    <!-- header 內容 -->
  </header>
  
  <section>
    <h2>HTML</h2>
    <p>HTML 是超文本標記語言。</p>
  </section>
  
  <footer>
    <!-- footer 內容 -->
  </footer>
</body>

例：

原始碼：

參考：HTML <section> Tag

<aside>

表示側邊欄的語意，通常與周圍的內容有相關性。

例：

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
  <h4>Epcot Center</h4>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

參考：HTML <aside> Tag

<main>

表示的是一份文件的主內容。需要注意的是一個網頁中，最多只能出現一次 <main> 標籤。

而且 <main> 標籤不能是這些標籤的子元素：<article>、<aside>、<footer>、<header>、<nav>。

例：

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>網頁標題</title>
  </head>
  <body>
  
    <main>
      <h1>Web Browsers</h1>
      <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

      <article>
        <h3>Google Chrome</h3>
        <p>Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
      </article>

      <article>
        <h3>Microsoft Edge</h3>
        <p>Edge is a free web browser from Microsoft, released in 1995.</p>
      </article>

    </main>
    
  </body>
</html>

使用 W3C Markup Validation 工具，來驗證看看。(將 <main> 標籤放在 <section> 標籤裡面。)

參考：HTML <main> Tag

<figure> 與 <figcaption>

表示的是一段自有的獨立內容，通常是一個圖片或段落或原始碼等。就用 <figure> 標籤包起來，而 <figure> 表示的是該內容的標題，可以放在 <figure> 標籤裡面的最一開始或最後面。

例：

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

或

<figure>
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
  <img src="pic_trulli.jpg" alt="Trulli">
</figure>

其它例子。

參考：HTML <figure> Tag、HTML <figcaption> Tag

<time>

針對一段文字，表達日期、時間的語意，可使用 <time> 標籤，也可搭配 datetime 屬性，設定時間。

例：

<p>每天早上 <time>10:00</time> 開始營業</p>

<p>在<time datetime="2020-01-01 10:00:00">元旦</time>那天有聚會。</p>

參考：HTML <time> Tag

<mark>

在一段文字當中，想要將裡面的某段文字強調出來，就可以加上 <mark> 標籤。例：

參考：HTML <mark> Tag

Previous2. HTML5 元素Next2.2 input 標籤的類型與屬性

Last updated