HTML 的控制維度：結構怎麼描述

學了 HTML，你就多了 10 個「控制點」來描述頁面結構。

「做一個頁面」「放一些內容」

沒有結構，AI 只能亂猜 div

「建立一個頁面，包含 header、main、footer。main 裡有一個產品列表 ul，每個 item 包含圖片、標題、價格與購買按鈕」

你在描述一個清楚的內容結構，而不是「一坨畫面」

你能控制的「結構控制點」

每學會一個 HTML 概念，就多了一個可以在 Prompt 裡使用的控制點。

維度
問題
Prompt 範例
結構（Structure）
內容怎麼分區？
「頁面分成 header、main、footer」
層級（Hierarchy）
誰在誰裡面？
「每個 card 裡面有 img、h3、p」
語意（Semantic）
這是什麼？
「用 nav 而不是 div 做導覽列」
類型（Element Type）
是文字？圖片？按鈕？
「用 button 不要用 div 做按鈕」
分組（Grouping）
哪些東西是一組？
「把頭像和名字包在同一個 div 裡」
清單（List）
是單一還是列表？
「商品用 ul > li 列表呈現」
表單（Form）
使用者要填什麼？
「表單包含 email input 和 submit button」
連結（Link）
可以導到哪裡？
「logo 連結到首頁，href="/"」
媒體（Media）
有沒有圖片/影片？
「每個商品要有 img，alt 寫商品名」
屬性（Attributes）
有沒有 id/class/alt/href？
「主區塊用 class="product-grid"」

Prompt 改造練習

點擊每個「不好的 Prompt」，看看加上 HTML 控制維度後會變成什麼樣子。

🦴

學了 HTML，你就多了 10 個「控制點」來描述頁面結構。AI 不用猜，你說什麼它就做什麼。

下一課