網站技術教學專區
網域、主機、網站設計與 SEO 架構解析
HTML基礎結構
每一個你在瀏覽器上看到的網頁，背後都是一份 HTML 文件。不管網站做得多精美、互動多豐富，最底層都是同一套固定的骨架。
這篇文章會從最基本的文件結構講起，帶你認識常用標籤、理解語義化標籤為什麼重要，最後動手做出第一個網頁。完全沒有基礎也能跟著做，只需要一個文字編輯器和瀏覽器。
HTML 文件的基本架構
HTML（HyperText Markup Language）是用來描述網頁內容結構的標記語言。每一個網頁的背後，都是一份有著固定骨架的 HTML 文件。
一份標準的 HTML5 文件由以下部分組成：
各部分的用途如下：
<!DOCTYPE html> — 這不是 HTML 標籤，而是宣告文件使用 HTML5 標準，必須放在第一行。
<html lang="zh-TW"> — 根元素，包住整份文件。lang 屬性告訴瀏覽器與搜尋引擎這頁使用的語言。
<head> — 放置給瀏覽器看的資訊，不會顯示在畫面上。charset="UTF-8" 讓中文正常顯示；viewport 設定讓網頁在手機上正確縮放；<title> 則是出現在瀏覽器分頁上的標題。
<body> — 所有使用者看得到的內容，全部放在這裡。
⚠️ 常見錯誤：忘記加
charset="UTF-8"會導致中文顯示亂碼，務必放在<head>的第一行。
常用的 HTML 標籤
HTML 有超過 100 個標籤，但初學階段只需掌握以下幾類：
文字標籤
<h1>～<h6>：標題，數字越小層級越高，<h1>是最主要的頁面標題<p>：段落文字<strong>：語意上的重要強調（視覺上為粗體）<em>：語氣上的強調（視覺上為斜體）<br>：強制換行<hr>：水平分隔線
連結與媒體
清單
💡
<strong>與<b>看起來都是粗體，但<strong>帶有「這段內容很重要」的語意，是更正確的選擇。
語義化標籤的重要性
HTML5 引入了一批名稱即說明用途的「語義化標籤」。你可能會問：容器不就用 <div> 就好？其實差別很大，理由有三：
1. SEO 效益：Google 爬蟲能透過 <article>、<main> 等標籤更準確判斷頁面的核心內容，有助於搜尋排名。想了解結構如何影響爬蟲抓取，可以看〈網站架構優化：建立 SEO 友善的網站結構〉。
2. 無障礙設計：視障者使用的螢幕閱讀器（如 VoiceOver）能透過 <nav>、<main> 快速跳轉頁面各區塊，大幅改善使用體驗。
3. 可讀性與維護性：六個月後重看自己的程式碼，<footer> 比 <div class="bottom-area"> 直覺得多。
常用語義化標籤
| 標籤 | 用途 |
|---|---|
<header> |
網站或區塊的頁首，通常含 Logo 與主標題 |
<nav> |
導覽連結群組 |
<main> |
頁面核心主體，一個頁面只應有一個 |
<article> |
獨立完整的內容單元，例如一篇文章 |
<section> |
有主題的內容分組，通常含標題 |
<aside> |
側欄或補充資訊 |
<footer> |
頁尾，常放版權與聯絡資訊 |
<figure> / <figcaption> |
圖表媒體與其說明文字 |
一個典型的語義化頁面骨架長這樣：
<header>...</header>
<nav>...</nav>
<main>
<section>...</section>
<article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>建立你的第一個網頁
理論說夠了，現在動手做。你只需要一個文字編輯器（推薦 VS Code）和一個瀏覽器。
步驟一：建立一個新資料夾，在裡面新增檔案，命名為 index.html。
步驟二：貼上以下完整程式碼：
步驟三：儲存後，將 index.html 拖曳到瀏覽器視窗，或雙擊開啟。你會看到一個沒有樣式、但結構完整的網頁——這就是所有精美網站的共同起點。
💡 開發小技巧：在 VS Code 安裝 Live Server 擴充套件，存檔後瀏覽器會自動重新整理，是學習 HTML/CSS 時最推薦的工作流程。
本日重點回顧
- HTML 文件由
<!DOCTYPE>、<html>、<head>、<body>四個核心部分構成 <head>放給瀏覽器看的資訊，<body>放使用者看到的內容- 常用標籤涵蓋文字、連結、圖片、清單四大類
- 語義化標籤（
<header>、<nav>、<main>等）在 SEO、無障礙設計與程式可讀性上都有明顯優勢 - 一個完整網頁只需一個文字編輯器就能建立，立刻動手是最快的學習方式
學會 HTML 之後，下一步是理解整個網站是怎麼組成的——從版面規劃、視覺設計到實際上線。〈網頁設計基礎概念：從零開始的完整入門指南〉整理了完整的入門路徑。