Day 14 - 語意化標籤的魔法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 14

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 14 篇

Day 14 - 語意化標籤的魔法

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-09-28 11:36:32

22 瀏覽

分享至

學習目標

認識 HTML5 語意化標籤
熟悉 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>
了解語意化對 SEO 與可讀性的影響
嘗試把一個普通的 <div> 版面改寫成語意化結構

重點觀念（結構更清晰）

語意化 = 讓標籤有意義：不只是排版，而是告訴瀏覽器與搜尋引擎「這一區塊是什麼」。
SEO 友好：搜尋引擎能更清楚理解文章架構。
無障礙設計：螢幕報讀器可以快速跳到主要內容或導航區塊。
少用亂七八糟的 <div>：能用語意化標籤時，就不要全靠 div。

語意化標籤示範

<body>
  <header>
    <h1>我的網站</h1>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">關於</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>最新文章</h2>
      <section>
        <h3>前端學習心得</h3>
        <p>今天我學到語意化標籤，讓結構更清晰。</p>
      </section>
      <section>
        <h3>未來挑戰</h3>
        <p>準備深入學習 CSS 與 JavaScript。</p>
      </section>
    </article>

    <aside>
      <h2>相關連結</h2>
      <ul>
        <li><a href="#">HTML5 文件</a></li>
        <li><a href="#">CSS Tricks</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 我的網站</p>
  </footer>
</body>