智慧生活科技專業社群｜大一新生網頁設計入門

從《勤勞小蜜蜂》部落格文章認識 HTML：用正確標籤建立清楚、有意義的網頁

HTML 不只是把文字放上網頁，更是在描述內容的角色。從一篇真實文章拆解標題、段落、圖片、清單、連結與語意結構。

打開一個網頁時，我們看到的是標題、文章、圖片與按鈕；瀏覽器看到的則是一組具有結構的 HTML 標籤。HTML 是 HyperText Markup Language 的縮寫，中文通常譯為「超文字標記語言」。它不是用來計算或控制流程的程式語言，而是用標籤說明一段內容是什麼。

本文以《勤勞小蜜蜂：爸爸教我的四種力量》部落格文章為例。原文有活動介紹、四種力量清單、Tale-Bot Pro 教學內容、SDGs 說明、圖片與教材資訊，因此能一次看到多種常用 HTML 標籤如何合作。

讀完本文，你將能夠：

辨認開始標籤、結束標籤、內容與屬性。
使用標題、段落、清單與連結組織文章。
以語意標籤表達頁首、主要文章、區段與頁尾。
為圖片加入替代文字，照顧無障礙與載入失敗情況。
理解 class、id 與常見連結屬性的用途。

一、一個 HTML 元素由什麼組成？

以段落為例，<p> 是開始標籤，</p> 是結束標籤，中間是使用者會讀到的內容。三者合起來稱為一個 HTML 元素。

段落元素

<p>父愛不只有一種模樣。</p>

<p>開始標籤

父愛……元素內容

</p>結束標籤

完整一組HTML 元素

有些元素沒有成對的結束標籤，例如圖片使用 <img>。圖片內容不是文字，而是透過 src 屬性指定檔案位置。

重要觀念：標籤名稱說明內容的角色，CSS 才負責外觀。不要因為想把文字變大，就隨意使用標題標籤；應先判斷它在文章結構中是不是標題。

二、用語意標籤建立文章骨架

原文最外層使用 <article>，表示這是一篇可以獨立閱讀或分享的文章。文章標題區使用 <header>，內容可再用 <section> 分組，最後的補充資訊則可放在 <footer>。

文章的語意結構

<article class="slt-post">
  <header>
    <h1>文章主標題</h1>
  </header>

  <section>
    <h2>第一個主題</h2>
    <p>主題內容</p>
  </section>

  <footer>作者與教材資訊</footer>
</article>

<article>可獨立成立的文章、新聞、貼文或作品。

<header>文章或區段的開頭，可放標題、摘要與分類。

<section>具有共同主題的一組內容，通常應有標題。

<footer>文章或區段的結尾資訊，例如作者、版權與延伸說明。

這些語意標籤通常不會自動帶來華麗外觀，但能幫助搜尋引擎、螢幕閱讀器與維護者理解文件。這也是為什麼「看起來一樣」的兩份網頁，HTML 品質仍可能不同。

三、標題與段落：建立清楚的閱讀層級

HTML 提供 <h1> 到 <h6> 六個標題層級。原則上，一篇文章以 <h1> 作為主標題，主要章節使用 <h2>，章節內的子題再使用 <h3>。

標題層級與段落

<h1>勤勞小蜜蜂：爸爸教我的四種力量</h1>

<h2>四位爸爸，帶來四種父愛力量</h2>
<p>父愛不只有一種模樣。</p>

<h3>企鵝爸爸：守護</h3>
<p>在冰雪與寒風中穩穩護住蛋。</p>

不要只因為 <h1> 預設字體最大，就用它放大文字；也不要從 <h2> 突然跳到 <h5>。先建立合理層級，再用 CSS 調整大小和顏色。

四、清單標籤：有順序與沒有順序要分清楚

步驟、排名與具有先後關係的內容適合使用有序清單 <ol>；條件、特色與不分先後的項目適合使用無序清單 <ul>。每一個清單項目都要放在 <li> 中。

四種力量使用有序清單

<ol class="power-list">
  <li><b>企鵝爸爸｜守護</b></li>
  <li><b>海馬爸爸｜愛與生命</b></li>
  <li><b>老鷹爸爸｜勇敢成長</b></li>
  <li><b>勇鬃爸爸｜責任與勇氣</b></li>
</ol>

即使 CSS 把預設數字隱藏並改成圓形編號，HTML 仍保留 <ol>，因為這四項是依序介紹的內容。這說明 HTML 負責語意，CSS 負責呈現，兩者各司其職。

五、圖片不是只有 img：figure、figcaption 與 alt

文章中的封面圖不只是裝飾，它有自己的說明文字，因此可使用 <figure> 包住圖片，再用 <figcaption> 放置圖說。

具有圖說與替代文字的圖片

<figure>
  <img
    src="cover.jpg"
    alt="勤勞小蜜蜂父親節繪本封面"
    width="1200"
    height="849">
  <figcaption>父親節 Tale-Bot Pro 課堂繪本</figcaption>
</figure>

alt 要怎麼寫？

描述圖片在目前文章中傳達的必要資訊，而不是把檔名重複一遍。
避免使用「這是一張……的圖片」等多餘開頭，螢幕閱讀器通常已會告知它是圖片。
純裝飾圖片可使用空值 alt=""，讓輔助工具略過。
圖片若同時也是連結，替代文字應說明點擊後的目的。

實務提醒：alt 是圖片無法載入時的替代資訊，也服務使用螢幕閱讀器的讀者；figcaption 則是所有讀者都看得到的圖說。兩者用途不同。

六、連結標籤與安全屬性

<a> 用來建立超連結，最重要的屬性是 href。原文的 PDF 下載按鈕在語意上仍是一個連結，只是透過 CSS 把它畫成按鈕外觀。

在新分頁開啟 PDF

<a
  href="picture-book.pdf"
  target="_blank"
  rel="noopener">
  下載 A4 橫式繪本 PDF
</a>

href：連結目的地，可以是網頁、圖片、PDF 或頁面內的位置。
target="_blank"：在新分頁或新視窗開啟。
rel="noopener"：新分頁開啟外部內容時的安全防護。

連結文字應能單獨說明目的。比起「按這裡」，「下載 A4 橫式繪本 PDF」更容易理解，也有利於無障礙操作。

七、引用內容使用 blockquote

原文章把一段重要教學觀點放在 <blockquote> 中。這個標籤表示一段區塊引用；CSS 再替它加上米白背景與左側色條。

區塊引用

<blockquote class="slt-quote">
  孩子走錯路時，正是在學習把問題變成
  「可以再試一次」的步驟。
</blockquote>

如果只是想替普通段落加背景，不應為了外觀濫用 <blockquote>；可使用 <aside>、<div> 或一般段落，再配合適當類別。

八、資料名稱與內容適合使用 dl、dt、dd

作者、出版單位與計畫名稱是一組「名稱—內容」資料。原文使用描述清單 <dl>，其中 <dt> 是名稱，<dd> 是對應說明。

教材資訊的描述清單

<dl>
  <dt>計畫名稱</dt>
  <dd>115年度官邸兒童館營運推廣案經營計畫</dd>

  <dt>繪本作者</dt>
  <dd>林正敏</dd>
</dl>

描述清單也適合術語解釋、問答配對、產品規格與聯絡資料。它比一串用冒號分隔的普通段落更能表達資料關係。

九、div、span、class 與 id 各自負責什麼？

<div> 是沒有特定語意的區塊容器，<span> 則是行內容器。當沒有更合適的語意標籤，又需要分組或套用樣式時才使用它們。

名稱	用途	範例	注意事項
`<div>`	分組一整塊內容。	活動資訊卡、按鈕列。	有合適的 article、section、figure 時，優先使用語意標籤。
`<span>`	標記句子中的一小段。	替關鍵字或程式碼片段加色。	不會自動換行，不適合包住完整區段。
`class`	替一個或多個元素建立分類名稱。	`class="info-card"`	同一個 class 可以重複使用。
`id`	識別頁面中唯一的元素，也可作為頁內連結目標。	`id="activity"`	同一頁不要出現兩個相同 id。

同時使用 class 與 id

<section id="activity" class="info-section">
  <h2>活動資訊</h2>
</section>

<a href="#activity">前往活動資訊</a>

十、註解與特殊字元

HTML 註解不會顯示在一般網頁畫面中，適合留下編輯提醒。原文章以註解提示張貼者把圖片與 PDF 的示意網址換成正式網址。

編輯註解

<!-- 上傳封面後，請把 COVER_IMAGE_URL 換成實際網址。 -->

如果要在網頁正文中直接顯示標籤文字，不能直接輸入 <h1>，否則瀏覽器會把它當成真正標籤。應將小於符號寫成 <，大於符號寫成 >。本文所有深色程式碼區塊都使用了這種字元實體。

十一、常用標籤快速整理

標籤	主要用途	原文章中的例子
`<article>`	可獨立閱讀的完整內容	包住整篇部落格文章
`<header>`	文章或區段的開頭	主標題與導言
`<h1>～<h3>`	建立標題層級	文章標題、章節與子題
`<p>`	一般文字段落	活動理念與教學說明
`<ol>、<ul>、<li>`	有序或無序的項目集合	四種力量與 SDGs 項目
`<figure>`	具有獨立意義的圖片或圖表	繪本封面
`<img>`	嵌入圖片	封面圖與活動海報
`<figcaption>`	圖片或圖表的可見說明	封面圖說
`<a>`	建立超連結	PDF 下載連結
`<blockquote>`	較長的區塊引用	程式思考教學觀點
`<dl>、<dt>、<dd>`	名稱與說明的配對資料	計畫、作者與單位資訊
`<strong>、<b>`	重要內容或視覺粗體	卡片名稱與提示文字

十二、新生實作：寫一篇自己的活動介紹

思考題

如果把文章裡所有標籤都換成 <div>，再用 CSS 做出相同外觀，肉眼可能看不出差異；但搜尋引擎、螢幕閱讀器與下一位維護者會失去哪些資訊？請從「結構、無障礙、維護」三個角度各寫一句說明。

十三、交作業前的 HTML 自我檢查

文章只有一個清楚的主標題，標題層級沒有任意跳號。
每一段完整文字都放在適當的段落或內容標籤中。
有順序與無順序的內容分別使用 <ol> 與 <ul>。
圖片都有符合用途的 alt，純裝飾圖使用空的替代文字。
連結文字能直接說明目的，不只寫「這裡」或「更多」。
新分頁連結搭配適當的 rel 安全屬性。
同一頁沒有重複的 id。
開始與結束標籤正確配對，巢狀順序沒有交錯。
先使用有意義的語意標籤，再考慮以 <div> 分組。

學習 HTML 的核心不是背誦標籤表，而是看到內容時能問：「這一段在文件中扮演什麼角色？」當標籤選得正確，CSS 更容易套用，網頁也更容易被閱讀、搜尋與維護。接著再搭配 CSS 調整色彩、間距與版面，就能從清楚的內容骨架建立完整的網頁作品。

智慧生活科技專業社群

2026年8月3日星期一