HTML 是由許多 Tag 組成的
把滑鼠移到左邊程式碼的任何一行，右邊網站對應的部分就會亮起來。
HTML（HyperText Markup Language）是網頁的骨架，用標籤定義頁面的結構與內容...
核心直覺
HTML 標籤永遠是一對的：<開始> 和 </結束>，中間包的就是內容。每個標籤是一個「有名字的盒子」。這個簡化版的 Google 搜尋頁裡就用到了 nav、main、footer、div、h2、p、a、img、input、button 等標籤，它們組合起來就是一個完整的網頁。
五大必知標籤圖鑑
認識最常見的五個 HTML 標籤。每個標籤都有程式碼、瀏覽器呈現和延伸知識。
div = "division"（區塊）。一個看不見的容器，用來把其他元素包在一起。它本身不會在畫面上產生任何視覺效果。
<div style="background:#e0f2fe;
padding:12px;
border-radius:8px;">
<p>我被 div 包住了！</p>
</div>我被 div 包住了！
延伸學習
div 是 HTML 裡最常見的標籤，在真實專案中佔所有標籤 50% 以上。現代框架（React、Vue）裡，幾乎所有 component 的最外層都是一個 div。當你看到 AI 生成的程式碼裡有大量 div 時不用驚慌，它們就是用來分組和排版的透明盒子。另外，div 是一個「block」元素，意思是它預設會佔滿一整行的寬度。
h1 最大（一頁通常只有一個），h6 最小。像書的章節標題，數字越大層級越低。
<h1>主標題</h1>
<h2>副標題</h2>
<h3>小節標題</h3>主標題
副標題
小節標題
延伸學習
標題層級不只影響字體大小，還會影響 SEO（搜尋引擎優化）。Google 會讀取 h1、h2 來理解你的頁面主題。一個頁面通常只有一個 h1（最重要的主標題），其他用 h2、h3 按層級往下。跟 AI 溝通時可以說「這個區塊的標題用 h2 就好」，AI 就知道這不是頁面主標題。
p = paragraph。包住一段普通文字，瀏覽器會自動在段落上下留間距。
<p>第一段文字。</p>
<p>第二段，自動隔開。</p>第一段文字。
第二段，自動隔開。
延伸學習
p 也是「block」元素，每段會獨佔一行。如果你只是想在一行裡面標記一小段文字（比如名稱、標籤），可以用 <span>，它是「inline」元素，不會換行。實務上，只要是「一段完整的文字內容」，就應該用 p 標籤包住，而不是裸放在 div 裡。
可以被點擊的按鈕。通常搭配 JavaScript 的 onClick 來執行功能。
<button>送出</button>
<button>取消</button>延伸學習
button 跟 div 最大的差異是語義。雖然你可以讓 div 也能被點擊，但 button 會自動支援鍵盤操作（按 Enter 觸發）和無障礙功能（螢幕閱讀器會唸出「按鈕」）。所以如果 AI 把可點擊的東西做成 div，可以提醒它改用 button，這是比較專業的做法。
顯示圖片。它是「自閉合標籤」，不需要結束標籤。必須用 src 屬性指定圖片來源。
<img src="/random-photo.jpg"
alt="隨機風景照" />
延伸學習
試試點擊右邊「瀏覽器呈現」面板右上角的 圖示，模擬圖片載入失敗，你會看到瀏覽器改為顯示 alt 替代文字。alt 屬性就是在圖片無法顯示、或使用者用螢幕閱讀器時派上用場的。AI 生成的程式碼常常忘記加 alt，這是你可以提醒它的地方。另外，img 是少數「自閉合標籤」之一（<input /> 也是），因為圖片標籤不會「包住」其他東西，所以不需要結束標籤。