昨天我們認識了一個網頁最基本的大外框與骨架（head 幕後大腦與 body 實體舞台）。今天，我們要進一步來看看：要把東西放進舞台裡時，該怎麼組織它們？

身為一個設計背景出身的人，剛接觸 HTML 時最常有的困惑是：「這不就是一堆英文尖角括號嗎？到底跟我的設計圖有什麼關係？」

後來我發現，其實寫 HTML 就跟在 Figma 裡拉圖層、建立 Frame（畫格）的概念一模一樣！

設計圖的 Frame vs. HTML 的巢狀結構

在 Figma 裡，我們習慣把畫面拆解成各種區塊：

• 最外層是整個網頁的尺寸（Frame）
• 裡面有導覽列、主視覺 Banner、卡片區塊（Group / Component）
• 區塊裡面再放圖片、標題、內文與按鈕（Layer / Text）

而在 HTML 的世界裡，它其實就是用文字來幫你把這些「圖層的階層關係（巢狀結構）」寫出來：

<!-- 就像是外層的大畫布 (Frame) -->
<main>
    <!-- 導覽列區塊 -->
    <header>
        <h1>我的設計作品集</h1>
    </header>

    <!-- 內容卡片區塊 -->
    <section>
        <h2>專案標題</h2>
        <p>這是專案的簡短介紹說明文字……</p>
    </section>
</main>

新手寫 HTML 最常見的壞習慣，就是從頭到尾只用 這個萬用容器打天下。這就像你在 Figma 裡面，全部的圖層都叫做 Rectangle 1、Rectangle 2 一樣——雖然畫面看起來一樣，但如果過了一個禮拜，你自己打開來看絕對會看到崩潰。
HTML 裡有很多具有「語意」的標籤，它們不只給人看，更是給瀏覽器和搜尋引擎（SEO）看的：

• <header>:網頁或區塊的標頭（像頂部的導覽列、大標題）。
• <main>:網頁主要的核心內容。
• <section>:獨立的內容區塊（像是一個個主題單元）。
• <article>:獨立完整的文章或卡片內容。
• <footer>:頁尾（通常放版權聲明、聯絡資訊）。
• 把標籤用在對的地方，就跟幫 Figma 圖層好好命名、做好 Auto Layout 一樣，是一種寫程式的優良美德！

今日小結

今天我們用設計師最習慣的「圖層與畫格」概念，重新找回了 HTML 結構的邏輯。原來程式碼不是冰冷的文字，它只是另一種幫畫面「分群組、建結構」的方式。

明天我們就要正式進入設計師最興奮的環節——用 CSS 幫這個光溜溜的骨架上妝、調整顏色與字型！我們明天見囉！

這樣順過來之後，Day 04 講「大容器」，Day 05 講「內部圖層與語意化」，節奏非常完美！後面的天數也可以依序往後推移一天，完全不用擔心東西漏掉喔！