前端容易忽視但卻重要的 - HTML 語意化標籤

你平常會用 HTML 語意化標籤嗎？

嗨～我是請網這邊走，前陣子在做自己的部落格時，因為希望提高 SEO 所以花了點時間研究 HTML5 推出的語意化標籤，研究後才發現裡面有很多細節是之前以為知道，但其實不清楚的。

如果你不適很熟悉語意化標籤，並且希望自己的網站有以下優點：

1. 提升SEO
2. 無障礙訪問
3. 更好的網頁維護和可擴展性

那這篇文就是為你寫的～

header

<header> 用於介紹性內容，比如網頁的標題、logo、搜尋框等等。

<header>
  <h1>Website Title</h1>
  <img src="./logo.png" alt="my logo" />
</header>

<header> 不局限於整個網站文檔的頭部，也可以用於文章內部的標題和簡介。

<article>
  <header>
    <h2>The artitle titele</h2>
    <p>Posted on Wednesday, 14 October 2024 by ThisWeb</p>
  </header>
  <p>
   somethine ...
  </p>
</article>

nav

<nav> 定義網頁導航連結的部分，像是網頁的 menu 、文章的標題索引，甚至麵包屑也可以用 <nav> 表示。

在網站主要的 Header，通常會將 header 和 nav 一起使用。

<header>
  <h1>LOGO</h1>
  <nav>
      <ul>
          <li><a href="/">Index</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/services">Services</a></li>
          <li><a href="/contact">Contact</a></li>
      </ul>
  </nav>
</header>

也可以用在麵包屑並搭配 ol 來表示順序。

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="...">Index</a></li>
    <li class="crumb"><a href="...">Categories</a></li>
    <li class="crumb"><a href="...">HTML</a></li>
    <li class="crumb">HTML Semantic</li>
  </ol>
</nav>

以及文章標題索引也很常使用 <nav>

<article>
  <h2>HTML 語意化標籤</h2>
  <nav class="article-menu">
    <h3>文章目錄</h3>
    <ul>
        <li><a href="#section1">Ch. 1</a></li>
        <li><a href="#section2">Ch. 2</a></li>
        <li><a href="#section3">Ch. 3</a></li>
        <li><a href="#section4">Ch. 4</a></li>
        <li><a href="#section5">Ch. 5</a></li>
    </ul>
  </nav>
  <p>...</p>
</article>

aside

表是一個和頁面中其它內容幾乎無關的部分，是獨立的一個區塊，即使被移除，也不會影響主要內容的理解，例如側邊攔、搜尋框、標籤群、廣告、引用或引文等等。

例如文章頁面的推薦閱讀 👇

<article>
    <h1>HTML 語意化標籤</h1>
    <p>HTML5引入了許多語意化標籤，旨在改善網頁的結構...</p>
</article>

<aside>
    <h2>推薦閱讀</h2>
    <ul>
        <li><a href="#">CSS3 新特性介绍</a></li>
        <li><a href="#">JavaScript ES6 概覽</a></li>
    </ul>
</aside>

<article>
  <p>HTML 語意化標籤可以提升 SEO 效果</p>
  <aside>(搜索引擎能夠更好地理解網頁結構和內容，從而提高網站在搜索結果中的排名)</aside>
  <p>...</p>
</article>

footer

表示頁面或文章內容的頁腳，裡面通常用於展示作者訊息、版權、相關連結、社交媒體等等。

他可以用在 body 的末尾來表示整個文檔頁面的頁腳，也可以用在<article>、<section>等元素內部來定義這些區塊的頁腳。

如果用在文章內部會放一些文章或作者的相關資訊。

<article>
    <h2>標題</h2>
    <p>内容...</p>
    <footer>
        <p>作者：請網這邊走</p>
        <p>發布日期：<time>2024年2月12日</time></p>
    </footer>
</article>

整個文檔的頁腳也可以用 <footer>來幫助用戶導覽整個網站的連結 👇

<footer>
    <p>copywirte &copy; 2024 thisweb </p>
    <p>contact me：<a href="mailto:contact@example.com">contact@example.com</a></p>
    <p><a href="#">to top</a></p>
    <nav>
        <h3>網站導覽</h3>
        <ul>
            <li><a href="/about">about</a></li>
            <li><a href="/privacy">privacy</a></li>
            <li><a href="/terms">temrs</a></li>
            <li><a href="/sitemap">sitemap</a></li>
        </ul>
    </nav>
</footer>

article

表示文檔、頁面或網站中的獨立或自成一體的內容，理論上可以從網站中獨立出來而且不會失去其意義，例如部落格文章、新聞文章、論壇帖子、評論、產品介紹等等。

<article>
    <header>
        <h2>HTML 語意化標籤</h2>
        <p>發布日期: <time>2024-02-12</time></p>
        <p>作者: this.web </p>
    </header>
    <p>HTML 語意化標籤可以提升 SEO 效果 ...</p>
    ...
</article>

雖然 <article> 標籤通常被用於包裹較長的文章或帖子，但它也適用於短片段的內容，只要這些內容在邏輯上是獨立的。如下 👇

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

<article> 元素可以嵌套使用，例如，在一個文章中嵌套另一篇文章作為引用或相關內容，但要注意保持內容的獨立性和結構的清晰性。

總而言之，只要內容可以作為一個獨立的作品在多個媒體上發表，就可以使用 <article>。

main

<main>標籤用於文檔的主要內容區域。這些內容應該是網頁獨有的，在頁面重複出現的內容如頭部、導航欄、底部信息等都不應該被包在 <main> 裡面。一個文檔中應該只有一個標籤。

一個完整的部落格文章結構可能如下 👇

<header>
    <!-- 頁面頭部，包含導航或 logo -->
    <nav>
      <!-- 導航連結 -->
    </nav>
</header>
<main>
    <article>
        <header>
          <h1>HTML5 語意化標籤</h1>
          <p>文章簡介</p>
        </header>
        <nav>
        <!-- 文章索引連結 -->
        </nav>
        <p><!-- 文章的主要内容 --></p>
    </article>
</main>
<footer>
    <!-- 頁腳 -->
</footer>

section

HTML <section> 元素表示 HTML 文件中一個通用獨立章節、區域，這些區段應該是和主題相關的內容。一般來說 <section> 會包含一個標題。

簡單說，只有當一個區塊的內容圍繞著一個明確的主題時，才適合使用 <section> 標籤。常用在文章內容的分段。

<section>
  <h2>HTML5語意化標籤</h2>
  <p>HTML5引入了多個語意化標籤，如`<article>`、`<aside>`、`<section>`等，旨在提升網頁的結構清晰度和可訪問性。 </p>
</section>
<section>
  <h2>為什麼要用語意化標籤</h2>
  <p>使用語意化標籤有助於改善SEO，增強網頁的可訪問性，同時使網頁的結構更加清晰。 </p>
</section>

figure & figcaption

用於表示文件內的獨立內容（如圖表、程式碼片段、圖片、插圖等），以及為這些內容提供標題或解釋。這兩個標籤一起使用，可以增強文件的語義化，使得內容的結構更加清晰。

<figure>
  <img src="path/to/image.jpg" alt="描述文字">
  <figcaption>圖1: 描述性文字說明圖像內容。</figcaption>
</figure>

blockquote

標籤用於表示文件中引用自其他來源的長段文字。這個標籤告訴瀏覽器和讀者，裡面的內容是從另一個來源引用過來的。

<p>一段內容 ... </p>
<blockquote> 某些名言佳句 </blockquote>

它通常會被瀏覽器以縮排的形式顯示，以視覺上區分引用內容和原文。

cite

<cite> 標籤用於引用作品的標題，例如書籍、歌曲、電影、研究報告等。它幫助文件表明某段文字是引用其它作品，通常顯示為斜體，以區別於正文。

<p><cite>HTML5權威指南</cite>是一本關於HTML5的深入解析書籍。</p>

mark & strong

<mark> 用於表示文件中需要被高亮顯示的文本，以吸引讀者的注意。例如搜尋結果中的關鍵字。

<strong> 用來表示文件中的重要內容，而非僅僅吸引注意。它通常用於強調應該被讀者特別注意的內容。

<mark>MARK</mark>
<strong>STRONG</strong>

time

<time> 標籤定義了一個日期/時間，瀏覽器可以以不同的方式解析這個標籤，例如將其轉換為使用者所在地區的日期格式。 標籤可以用來確保日期和時間的易讀性，並有助於搜尋引擎理解日期/時間資料。

<p>發布日期：<time datetime="2023-09-14">2023年9月14日</time></p>

address

<address> 標籤在 HTML 中用於提供某個人或某個組織的聯絡訊息，包括但不限於實體地址、電子郵件地址、電話號碼、社交媒體帳號等。使用 <address> 有助於搜尋引擎和其他自動化工具識別網頁上的聯絡資訊。

常用在網站頁尾、文章作者或聯絡頁面。

<address>
  <ul>
    <li>Email：<a href="mailto:example@example.com">example@example.com</a></li>
    <li>GitHub：<a href="https://github.com/example">GitHub</a></li>
    <li>Phone：<a href="tel:+1234567890">0912345678</a></li>
  </ul>
</address>

小結

到這邊就算是把比較常用且重要的語意化標籤都講完了，希望這篇文章可以讓你更理解 HTML 語意化標籤該怎麼使用，HTML 算是很簡單但又容易被忽視的一部份，之後寫 HTML 的時候常是用這些語意化標籤吧～

那就下篇貼文見了，我是請網這邊走～掰掰～！