學習 HTML 的第一週結束後，我看著自己的程式碼，發現到處都是 <div> 標籤。巢狀的 div、包著 div、再包著更多 div。程式碼能跑，但讀起來就像矇著眼睛走迷宮。
然後我發現了語意化 HTML 標籤，一切都變了。
在第二週，我學會了只要 5 個語意標籤，就能把程式碼從混亂變成專業。這些語意化 HTML 標籤不只是最佳實踐——它們是「能跑的程式碼」和「易於維護、無障礙、對 SEO 友善的程式碼」之間的分水嶺。
如果你也是被 div 淹沒的初學者，這篇文章就是為你寫的。讓我告訴你，這 5 個必學標籤如何在接下來的兩週內，讓你的 HTML 功力大躍進。
<div> 的問題（以及我為什麼一直用它）
我真希望有人在第一天就告訴我：語意化 HTML 指的是使用能描述目的的標籤，而不只是「能用」的標籤。
身為初學者，我什麼都用 <div>。為什麼？因為它能用。因為大部分快速教學都這樣寫。因為思考「語意含義」感覺像是進階主題，可以之後再說。
但我沒意識到的是：
螢幕閱讀器無法導航我的網頁。 視障使用者沒辦法跳到導覽列或直接到主要內容。我「能用」的網站，排除了一整群人。
搜尋引擎無法理解我的內容結構。 Google 只能猜測我網頁的哪些部分比較重要。這對 SEO 不太好。
幾天後連我自己都看不懂。 回頭看一堆寫著 header-wrapper 和 content-container 類別名稱的 div，真的很累。我在用類別名稱寫文件，因為我的 HTML 本身什麼都沒說。
看看這個比較：
<!-- 之前：這到底是什麼？ -->
<div class="header">
<div class="logo">我的網站</div>
<div class="menu">...</div>
</div>
<!-- 之後：一目了然 -->
<header>
<h1>我的網站</h1>
<nav>...</nav>
</header>
視覺效果一樣。但意義完全不同。一個是自我說明、無障礙、對 SEO 友善的。另一個就只是... div。
一旦我理解了「為什麼」語意標籤很重要，學習這些基本標籤其實出乎意料地簡單。以下是你真正需要優先學會的 5 個。
核心 5 標籤：先掌握這些
1. <header> — 你的頁面開場白
它是什麼： 網頁、區塊或文章的介紹性內容或導覽輔助。
何時使用： 在網頁頂部、文章開頭，或是任何主要區塊的引言處。
我犯過的新手錯誤： 以為一個頁面只能有一個 header。錯了。你可以有多個 header——一個給網站、一個給每篇文章、一個給每個主要區塊。<header> 標籤講的是角色，不是位置。
實際範例：
<!-- 網站 header -->
<header>
<h1>我的作品集</h1>
<nav>
<ul>
<li><a href="#about">關於</a></li>
<li><a href="#projects">專案</a></li>
</ul>
</nav>
</header>
<!-- 文章 header -->
<article>
<header>
<h2>我的第一篇部落格文章</h2>
<p>發佈於 <time datetime="2025-10-27">2025 年 10 月 27 日</time></p>
</header>
<p>文章內容在這裡...</p>
</article>
💡 記住：
<header>是用來放介紹性內容，不只是頁面最上方。網頁本身、文章、區塊都可以有 header。
2. <nav> — 你的導覽中樞
它是什麼： 主要導覽區塊的容器，像是選單、目錄或麵包屑。
何時使用： 主要網站導覽、頁面內導覽，或任何主要的導覽連結群組。
我犯過的新手錯誤： 每一組連結都用 <nav>。別這樣。把它保留給主要導覽區塊。頁尾那三個社群媒體圖示？可能不需要 <nav>。你的主選單？絕對需要。
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/blog">部落格</a></li>
<li><a href="/contact">聯絡</a></li>
</ul>
</nav>
為什麼重要：
螢幕閱讀器會提供「跳到導覽」功能，這依賴 <nav> 標籤。搜尋引擎用它來理解你的網站結構。其他開發者不用看類別名稱，就能立刻知道這是導覽。
✅ 最佳實踐： 只在主要導覽區塊使用
<nav>，不是每組連結都要用。
3. <main> — 你的主要內容
它是什麼： 網頁的主要內容。主角。除了導覽、標頭、側邊欄和頁尾以外的所有內容。
何時使用： 包裹你的主要頁面內容。這是讓我卡關的規則：每個頁面只能有一個 <main>。
我犯過的新手錯誤： 要不是完全忘記用它，就是試著在一個頁面用多個 <main>。一個頁面，一個主要內容區。就是這個規則。
<body>
<header>網站標頭</header>
<nav>網站導覽</nav>
<main>
<!-- 所有主要內容都放這裡 -->
<h1>歡迎來到我的網站</h1>
<p>這是主要內容...</p>
</main>
<footer>網站頁尾</footer>
</body>
為什麼重要：
螢幕閱讀器可以直接跳到 <main> 內的主要內容。「跳到主要內容」的無障礙連結就依賴這個標籤。搜尋引擎會優先處理 <main> 內的內容，因為它們知道這是你的重點。
⚠️ 重要： 每個頁面只能有一個
<main>。除了標頭、導覽、側邊欄和頁尾以外，所有東西都放進<main>。
4. <article> — 獨立的內容
它是什麼： 一個獨立的內容片段，脫離頁面其他部分仍然有意義。
何時使用： 部落格文章、新聞報導、產品卡片、論壇貼文、使用者留言——任何可以被抽出來在別處發布、仍然有意義的內容。
我犯過的新手錯誤： 把 <article> 和 <section> 搞混。它們很像，但區別在於：這個內容可以被聯播、分享或在別處重新發布嗎？如果可以，它大概是 <article>。
<main>
<article>
<header>
<h2>理解語意化 HTML</h2>
<p>作者：Leon Wong | 2025 年 10 月 27 日</p>
</header>
<p>文章內容在這裡...</p>
<footer>
<p>標籤：HTML, 網頁開發</p>
</footer>
</article>
<article>
<h2>CSS Flexbox 指南</h2>
<p>另一篇獨立的文章...</p>
</article>
</main>
我用的測試： 「我能把這個放進 RSS feed、電子報，或另一個網站而不會失去脈絡嗎？」如果可以 → <article>。
💡 這樣想： 如果你可以把這段內容抽出來單獨發布，它大概就是
<article>。
5. <section> — 主題分組
它是什麼： 內容的主題分組，通常有自己的標題。
何時使用： 長文章中的章節、分頁內容、頁面內的主題區域——任何你在共同主題下分組相關內容的地方。
我犯過的新手錯誤： 把 <section> 當作樣式包裝器。如果你只是為了套用 CSS 而分組元素，用 <div>。只有在分組有語意意義時才用 <section>。
<article>
<h1>我的學習旅程</h1>
<section>
<h2>第一週：HTML 基礎</h2>
<p>在第一週，我學到...</p>
</section>
<section>
<h2>第二週：語意標籤</h2>
<p>在第二週，我發現...</p>
</section>
</article>
我用的測試： 「這個內容有自然的標題嗎？」如果有 → 大概是 <section>。
✅ 經驗法則： 如果你的內容需要標題才有意義，用
<section>。如果只是為了樣式而分組，用<div>。
這 5 個標籤如何改造我的程式碼
讓我展示一個實際頁面結構的前後對比：
之前（全部都是 div）：
<div class="header">
<div class="logo">我的部落格</div>
<div class="nav">
<a href="/">首頁</a>
<a href="/about">關於</a>
</div>
</div>
<div class="content">
<div class="post">
<div class="post-header">
<h1>我的文章標題</h1>
</div>
<div class="post-content">
<p>文章內容在這裡...</p>
</div>
</div>
</div>
<div class="footer">
<p>© 2025 我的部落格</p>
</div>
之後（語意標籤）：
<header>
<h1>我的部落格</h1>
<nav>
<a href="/">首頁</a>
<a href="/about">關於</a>
</nav>
</header>
<main>
<article>
<header>
<h2>我的文章標題</h2>
</header>
<section>
<p>文章內容在這裡...</p>
</section>
</article>
</main>
<footer>
<p>© 2025 我的部落格</p>
</footer>
改變了什麼：
結構瞬間清晰了。開發者只要瞄一眼，幾秒內就能理解頁面層級。無障礙工具可以正確導覽。搜尋引擎理解哪些內容最重要。而且我不需要複雜的類別名稱來說明每個元素的作用——HTML 本身就是自我說明的。
信心的轉變
在第二週學會這 5 個語意標籤，徹底改變了我寫 HTML 的方式。
接下來的學習變得很自然。學 <aside> 用於側邊欄、<footer> 用於頁尾內容，還有更進階的語意標籤，都不覺得困難——它們都符合我已經建立的心智模型。
最棒的部分？無障礙性、SEO 和可維護性不再是「額外的工作」。它們從一開始就內建在我的程式碼中，因為我是根據目的選擇標籤，而不是外觀。
如果你跟我一樣在第二週學會這 5 個標籤，你寫的程式碼會比大部分學了好幾個月的初學者都好。這不是誇張——語意化 HTML 是區分專業程式碼和初學者程式碼的基本功之一。
重點整理：
✅ 語意化 HTML = 描述目的的標籤，而不只是外觀
✅ 必學 5 標籤： <header>、<nav>、<main>、<article>、<section>
✅ 好處： 內建無障礙性、SEO、可維護性和專業度
✅ 黃金法則： 根據目的選擇標籤，不是外觀
你的下一步
想練習嗎？這是你的作業：拿一個你用 div 建立的網頁，用這 5 個標籤重構它。
打開你最近的 HTML 專案。找出那些有語意類別名稱的 div，像是「header」、「navigation」或「main-content」。把它們換成正確的語意標籤。你會驚訝於程式碼變得多清楚。
你身為初學者最大的 HTML 困惑是什麼？ 在底下留言，我會在下一篇文章處理它。我正在公開學習，分享我一路上發現的所有東西。
如果這篇文章對你有幫助，追蹤我以獲得更多初學者友善的網頁開發指南。下一篇：我會深入探討 CSS Flexbox 和 Grid，告訴你應該先學哪一個（附上你真正看得懂的視覺範例）。
讓我們一起寫出更好的程式碼。🚀
#HTML #網頁開發 #前端開發 #程式教學 #初學者指南 #語意化HTML #無障礙網頁 #SEO優化
