2025.12.29
2026 HTML 架構教學｜從草稿到語意化版型：一步步組出一頁完整網頁
一、為什麼要特別學「HTML 架構」，而不是再多背幾個標籤？
很多人學 HTML 的順序是：標籤是什麼 → 怎麼用 → 能不能顯示出來
但做到這裡，你頂多是「會打字的人」，還不是「會設計結構的人」。
一個好的 HTML 架構，至少要做到：
- 一眼看出：頁面有哪些區塊？哪裡是主內容？
- 標題階層清楚：H1 是什麼？H2、H3 如何對應內容大綱？
- 語意化標籤用得合理：header / main / section / article / aside / footer 有分工
- 後續換版型、改設計、做 RWD 時，不需要大改 HTML
內容大綱 → 手繪草稿 → 區塊命名 → 選標籤 → 寫出語意化 HTML 架構
二、在寫 HTML 之前：先畫出你的頁面架構
新手最常見的錯誤：一打開編輯器就開始敲 <div>。在實務上，我們通常會先做兩件事：
- 列出這一頁要放哪些內容
- 大致畫出區塊位置（Wireframe）
2-1 用「大綱」的方式拆內容
以一個服務介紹頁為例，你可能會列出：頁首：Logo、主選單、聯絡按鈕
Hero 區：主標、簡介、行動呼籲（CTA 按鈕）
服務介紹：三～四個服務卡片
案例／客戶見證
常見問題（FAQ）
頁腳：聯絡資訊、版權、社群連結
這個大綱稍微整理一下，其實就已經很接近 HTML 的架構：
- <header>：Logo + 導覽列
- <main>：主要內容
- <section> Hero
- <section> 服務介紹
- <section> 案例／見證
- <section> FAQ
- <footer>：聯絡資訊與版權
2-2 用「由外而內」的思維拆版型
一頁網頁可以想像成：- 最外層：整個頁面 <html> → <body>
- 第一層區塊：header / main / footer /（有時）aside
- 第二層區塊：每個 section、article
- 第三層內容：標題、段落、清單、圖片、表格…
- 先想：這一塊內容在整頁中扮演什麼角色？
- 再決定：適合用哪一個語意標籤包起來？
三、HTML 頁面骨架快速複習
在實務開發中，比起一開始就看 <head>，更推薦先理解「畫面是怎麼被組成的」。因為對使用者與搜尋引擎來說，真正有意義的內容，其實都在 <body> 裡。
以下我們會用「從外到內」的方式，快速理解 HTML 頁面結構。
（一）HTML 最外層結構（先看全貌）
<!DOCTYPE html><html lang="zh-Hant">
<head>
<!-- 給瀏覽器與搜尋引擎看的資訊 -->
</head>
<body>
<!-- 使用者實際看到的畫面 -->
</body>
</html>
你可以把整個網頁想成一個人：
- <html>：整個人
- <head>：大腦（設定、理解、判斷用）
- <body>：身體（使用者真正看到與互動的內容）
（二）先從 body 看起：畫面是怎麼組成的？
<body> 裡面放的，才是真正呈現在畫面上的內容，例如：- 導覽列（header）
- 主要內容（main）
- 文章區塊（article）
- 區段內容（section）
- 側欄（aside）
- 頁尾（footer）
一個標準、好理解的結構通常長這樣：
<body>
<header>
網站標題與導覽列
</header>
<main>
<section>
<h1>主標題</h1>
<p>主要內容說明</p>
</section>
<section>
<h2>次標題</h2>
<p>補充說明內容</p>
</section>
</main>
<footer>
版權資訊、聯絡方式
</footer>
</body>
為什麼這樣切很重要？
- 搜尋引擎能快速理解內容結構
- 輔助科技（如螢幕閱讀器）能正確導覽
- CSS 與 RWD 排版更好維護
- SEO 權重更清楚地集中在重要內容
四、語意化布局：六個常用結構標籤如何分工？
這六個是 HTML 架構的主角，你前一篇有介紹，這裡用「分工表」再整理一次：- <header>：頁首；常放 Logo、主選單、搜尋框。
- <nav>：導覽區；放主要導覽連結（不一定要在 header 裡，但很常在）。
- <main>：一頁中最重要、唯一的主內容。
- <section>：一個主題區塊（像是「最新消息」、「服務介紹」）。
- <article>：一篇可以獨立存在的內容，例如一篇部落格文章、一則新聞。
- <aside>：側欄、補充資訊、相關連結。
- <footer>：頁腳；常放版權、聯絡方式、次要連結。
4-1 一頁網頁的通用骨架範例
<body><header>
<!-- Logo、主選單、可能的聯絡按鈕 -->
</header>
<main>
<!-- 一塊一塊的主內容 section -->
</main>
<aside>
<!-- 側欄：熱門文章、下載區、聯絡資訊、小工具 -->
</aside>
<footer>
<!-- 版權資訊、社群連結、次要選單 -->
</footer>
</body>
你可以把這個視為「所有頁面都可以套用的基本框架」，接下來只要決定：
main 裡要放幾個 section？有沒有需要 article？側欄要不要出現？
五、實戰 1：品牌官網首頁的 HTML 架構
先定義首頁常見區塊：- Hero 區（主視覺 + Slogan + CTA）
- 服務項目總覽
- 精選案例
- 最新消息 / 部落格摘要
- 行動呼籲區（再次 CTA）
- 頁腳
5-1 架構示範（不含細節樣式）
<body><header>
<div class="logo">Brand Logo</div>
<nav>
<ul>
<li><a href="#services">服務項目</a></li>
<li><a href="#cases">成功案例</a></li>
<li><a href="#blog">最新文章</a></li>
<li><a href="#contact">聯絡我們</a></li>
</ul>
</nav>
</header>
<main>
<!-- Hero 區 -->
<section id="hero">
<h1>用 HTML5 打造現代網站</h1>
<p>一句話說明你的品牌或服務價值。</p>
<a href="#contact">立即聯絡我們</a>
</section>
<!-- 服務項目 -->
<section id="services">
<h2>我們的服務</h2>
<!-- 三～四個服務卡片 -->
</section>
<!-- 精選案例 -->
<section id="cases">
<h2>成功案例</h2>
<!-- 案例列表或卡片 -->
</section>
<!-- 最新文章 -->
<section id="blog">
<h2>最新文章</h2>
<!-- 多個 <article>，每篇有標題與摘要 -->
<article>
<h3>HTML 基礎知識介紹</h3>
<p>簡短摘要內容…</p>
</article>
<article>
<h3>HTML5 常用標籤與語法教學</h3>
<p>簡短摘要內容…</p>
</article>
</section>
<!-- 行動呼籲區 -->
<section id="contact">
<h2>準備好開始你的網站了嗎？</h2>
<p>留下資訊，我們會在 1～2 個工作天內與你聯繫。</p>
<!-- 這裡未來可以放表單 -->
</section>
</main>
<footer>
<p>© 2026 某某公司．保留所有權利</p>
</footer>
</body>
這裡的重點不在 CSS，而是：
- 使用 id 讓導覽列可以跳到對應區塊
- 每個主要區塊用 <section>，並搭配一個 <h2>
- 文章列表用 <article> 包起來，之後可以單獨連到每篇文章頁
六、實戰 2：服務介紹頁（單欄內容＋側欄）的 HTML 架構
這類頁面常見在 B2B 官網、服務型網站。內容大綱：
- 主標題：這個服務是什麼
- 服務簡介 & 優點
- 服務流程
- 價格區間或方案（不一定要寫死）
- FAQ
- 側欄：聯絡資訊、下載 DM、其他服務連結
6-1 架構示範
<body><header>
<!-- 共用 header -->
</header>
<main>
<article>
<header>
<h1>企業網站設計服務</h1>
<p>專為中小企業打造的客製化網站方案。</p>
</header>
<section>
<h2>服務特色</h2>
<!-- 列點或卡片 -->
</section>
<section>
<h2>合作流程</h2>
<!-- 步驟清單 -->
</section>
<section>
<h2>方案說明</h2>
<!-- 價格區間、方案比較表 -->
</section>
<section>
<h2>常見問題（FAQ）</h2>
<!-- 問答列表，可用 <dl> 或 <details> -->
</section>
<footer>
<p>想了解更多細節，歡迎直接與我們聯絡。</p>
</footer>
</article>
</main>
<aside>
<section>
<h2>聯絡與諮詢</h2>
<!-- 聯絡資訊或按鈕 -->
</section>
<section>
<h2>下載服務簡章</h2>
<!-- 檔案下載連結 -->
</section>
<section>
<h2>其他服務</h2>
<!-- 站內其他服務連結 -->
</section>
</aside>
<footer>
<!-- 共用 footer -->
</footer>
</body>
關鍵概念：
- 整頁主體用 <article>，因為「服務介紹頁」本身就是一個獨立內容。
- <aside> 放的是輔助資訊，即使拿掉，主內容也說得通。
- <article> 裡仍然可以有 <header>、<footer>，這不是只留給整個網站用的。
七、實戰 3：部落格文章頁 HTML 架構
文章頁是最能展現「標題階層＋語意化」威力的地方，也直接關係到 SEO。常見內容：
- 文章標題、作者、日期
- 文章主內容（多個小節）
- 相關文章、標籤
- 作者簡介
- 留言區
7-1 架構示範
<body><header>
<!-- 網站共用 header -->
</header>
<main>
<article>
<header>
<h1>HTML 架構教學：從草稿到語意化版型</h1>
<p>作者：Luna｜更新日期：2026/01/05</p>
</header>
<section>
<h2>為什麼要學 HTML 架構？</h2>
<p>說明文章目的與閱讀收穫……</p>
</section>
<section>
<h2>先從內容大綱開始拆頁面</h2>
<h3>列出這一頁要出現的資訊</h3>
<p>……</p>
<h3>畫出簡單區塊草圖</h3>
<p>……</p>
</section>
<section>
<h2>用語意化標籤組出骨架</h2>
<p>……</p>
</section>
<footer>
<section aria-label="文章標籤">
<h2>標籤</h2>
<ul>
<li><a href="/tags/html">HTML</a></li>
<li><a href="/tags/frontend">前端</a></li>
</ul>
</section>
<section aria-label="作者介紹">
<h2>作者介紹</h2>
<p>簡單介紹作者背景……</p>
</section>
</footer>
</article>
<aside>
<section>
<h2>相關文章</h2>
<ul>
<li><a href="/html-basic">HTML 基礎知識介紹</a></li>
<li><a href="/html5-tags">HTML5 常用標籤與語法教學</a></li>
</ul>
</section>
</aside>
</main>
<footer>
<!-- 網站共用 footer -->
</footer>
</body>
八、讓 HTML 架構「更好維護」的實務小技巧
8-1 命名規則一致
雖然這篇不主講 CSS，但在寫 HTML 架構時就可以有點預想，會讓未來的HTML和CSS更好維護：- id 用來對應頁面內錨點（#services、#faq）
- class 用來描述區塊角色（hero-section、service-card）
建議：
- 全部用小寫
- 多個字用連字號 -（main-banner、site-header）
- 命名讓人看到就知道目的（避免 box1、box2 這種）
8-2 避免「巢狀地獄」
如果你發現 HTML 變成這樣：<div>
<div>
<div>
<div>
<div>內容</div>
</div>
</div>
</div>
</div>
代表你可能：
- 過度依賴 <div>，沒有善用 <section>、<article>、<header>…
- 一層一層都是為了排版，而不是為了結構
可以嘗試重構成：
<section class="hero">
<div class="hero-inner">
<h1>主標題</h1>
<p>文字說明</p>
</div>
</section>
8-3 一頁只用一個 <h1>，其餘依內容層級往下排
前面文章我們已經提過 H1 的重要性，而實際架構上的落點如下：- <h1>：整頁主題（通常在 article 或 main 開頭）
- <h2>：主段落標題（對應 section）
- <h3>：小節標題（對應 section 裡的小主題）
只要照著內容大綱 → H1 / H2 / H3 的邏輯去排，架構自然就清楚。
8-4 用註解標示大區塊
在實務專案中，頁面可能變得很長，適度加上註解可以幫未來的自己節省很多時間：<!-- ===== Hero 區開始 ===== -->
<section id="hero">
...
</section>
<!-- ===== Hero 區結束 ===== -->
地址：台中市西屯區大墩二十街63號2F-1 
電話：04-23109296 
info@ileo.com.tw