Day02. HTML 文字標籤大集合：讓文字不只是文字

昨天我們蓋好了 HTML 的基本「骨架」，今天我們要在這棟房子裡擺放第一批家具——文字標籤。
說實話，剛開始學 HTML 的我，覺得「文字就是文字嘛，有什麼好分？」結果後來才發現，當我們寫 <b> 和 <strong>，在瀏覽器看起來都一樣是粗體，但在「語意」和「搜尋引擎」眼裡完全不同。這也是為什麼近幾年很強調 語意化 HTML。

文字標籤的幾個角色

1. 標題（Heading）

從 <h1> 到 <h6>，標題不只是字變大，它在搜尋引擎和輔助工具眼中，代表了「層級結構」。

<h1>我的個人網頁</h1>
<h2>關於我</h2>
<h3>興趣與專長</h3>

心得：千萬不要因為想讓字大就用 h1，那是 CSS 的工作。標題就是用來當「章節標題」的

2. 段落（Paragraph）

<p>是最常用的標籤之一，用來放一段完整的文字。

<p> 123<p>

小提醒：不要把整篇文章都塞進一個 <p>，那就失去可讀性了

3. 強調（Emphasis）

常見的：

• <strong>：語意是「重要的」，在瀏覽器裡通常呈現粗體
• <em>：語意是「強調」，通常會呈現斜體

<p>abc <strong> abc </strong> 123</p>
<p>qwe <em> qwe </em> 123 </p>

4. 行內標籤（Inline）

只是想在句子裡標註一小段文字的話，可以嘗試:

• <span>：沒有特別語意，通常搭配 CSS 使用。
• <mark>：用螢光筆「標記」重點。
• <code>：顯示程式碼片段

<p>這段文字裡我想要 <span style="color:red">標紅</span>。</p>
<p>這是考試重點：<mark>不要忘記 DOCTYPE</mark></p>
<p>我的第一行程式碼是：<code>console.log("Hello World")</code></p>

5. 列表（List）

這可以讓排版看起來變整齊~~

• 無序清單<ul>：用於呈現沒有特定順序的項目，通常以項目符號(例如實心圓點) 開頭
• 有序清單<ol>：用於呈現有順序的項目，例如步驟、排名等。 HTML 會自動為每一項添加數字(1, 2, 3...) 或其他序號標記
• 列表項目<li>：是無序列表或有序列表中的一個具體項目，包含該項目的文字內容。 每個 <li> 標籤都必須包含在<ul>或 <ol> 標籤內部

學習心得

如果沒有善用段落、標題、列表，整篇內容會像一堵文字牆，很難閱讀。
HTML 的價值不是「怎麼顯示」，而是「它在告訴電腦這段文字是什麼」
舉例：
<h1> 代表「文章的標題」，不是單純字比較大。
<em> 代表「這句話要被強調」，不只是字變斜。
這些小細節(語意化)，會影響到搜尋引擎排名，也會影響到有需要輔助工具的人是否能理解你的網頁。

推薦的學習資源

W3Schools —— 練習範例方便，但要注意不是每篇都最先進
MDN Web Docs —— 最權威的參考文件