很多初學者學網頁設計時，習慣先從視覺稿或模板下手，看到別人做得好看的網站就想模仿配色與版面，卻很少真正拆解過一個網頁元件底層的HTML結構是怎麼組成的。這篇網頁設計html範例的介紹，不是要帶你看漂亮的視覺稿，而是聚焦在程式碼層級，用文字說明幾個網站上最常見的元件，例如導覽列、Hero首屏區塊、聯絡表單與頁尾，分別該用哪些HTML標籤、標籤之間的階層關係是什麼、以及為什麼選擇某個語意標籤而不是另一個。透過理解這些結構邏輯，對剛開始學網頁設計的人來說，會比單純套用模板更能建立起「網頁架構」的觀念。
為什麼透過HTML結構學網頁設計，比直接套版更扎實
直接套用現成模板，可以很快做出一個看起來像樣的頁面，但如果不理解每個區塊背後的HTML結構，遇到需要調整版面或除錯的時候，往往會不知道該從哪裡下手。理解HTML結構的好處，是當你看到任何一個網站的某個區塊時，腦中會自然浮現「這個區塊大概是用什麼標籤包起來的、裡面的階層關係大概長什麼樣子」，這種拆解能力，是往後不管要自己刻版面、還是要在既有網站上做調整，都用得到的基礎能力。
學習HTML結構還有一個常被忽略的好處，就是語意化標籤的選擇會直接影響網頁對搜尋引擎與輔助工具的友善程度。同樣是把一段文字包起來，用有語意的標籤跟只用沒有意義的容器標籤，對機器來說代表的意義完全不同，這也是為什麼理解結構，而不是只會複製貼上別人的成品，對長期經營一個網站來說格外重要。
導覽列的結構範例與標籤選擇邏輯
導覽列通常出現在頁面最上方，包含網站的標誌與一組導覽連結。從結構上來看，整個導覽列會被一個語意標籤包住，代表「這是一個導覽區塊」，裡面通常會分成兩個部分：一邊放網站標誌，通常會用一個連結包住圖片或文字，讓使用者點擊後可以回到首頁；另一邊放導覽連結群組，這組連結通常會用清單的方式呈現，也就是一個清單容器裡面包著好幾個清單項目，每個項目裡面再放一個連結，而不是把每個連結直接並排寫成一串文字。
這樣的階層關係看似繁瑣，但其實反映了導覽列本質上就是「一組相關連結的集合」，用清單的結構去表達，比單純用文字加空格分隔更符合這個區塊真正的語意。如果網站有下拉選單的需求，通常會在某個清單項目裡面，再包一層新的清單，形成巢狀的結構，代表這是某個主選項底下的子選項群組。
Hero首屏區塊的結構範例：標題、說明文字、行動按鈕怎麼包
Hero首屏區塊，是使用者進入網站後第一眼看到的大範圍區塊，通常包含一個主標題、一段簡短的說明文字，以及一個或多個行動呼籲按鈕。從結構上來看，這整個區塊通常會用一個區段標籤包起來，代表這是頁面上一個獨立的內容區段，裡面依序放主標題、說明文字段落，以及行動按鈕。
值得注意的是，主標題在整個頁面的階層裡通常會是層級最高的標題，因為Hero區塊往往就是這個頁面最重要的訊息所在；而下方的行動呼籲按鈕，結構上通常是一個連結，只是透過樣式讓它看起來像按鈕。理解這一點很重要，因為很多初學者會誤以為畫面上看起來像按鈕的元素，底層一定要用按鈕標籤才對，但實際上，如果這個元素的作用是導向另一個頁面，用連結包裝、再透過樣式呈現成按鈕的外觀，反而是比較常見也比較合理的做法。
聯絡表單的結構範例：欄位、標籤與送出按鈕的階層關係
聯絡表單是網站上功能性最強的元件之一，結構上通常會用一個表單容器把所有欄位包起來，代表這整個區塊是一組要送出的資料。表單裡的每一個欄位，理想上都應該搭配一個對應的文字標籤，說明這個欄位要填寫什麼內容，例如姓名、電子郵件、訊息內容，標籤與輸入欄位之間會透過對應關係連結在一起，讓使用者點擊標籤文字時，游標也能自動移到對應的輸入框裡。
表單的最後，通常會放一個送出按鈕，結構上會使用按鈕標籤，並且明確標示這是用來送出整份表單的動作，跟前面提到Hero區塊裡用連結包裝的行動呼籲按鈕不同，因為這裡的動作是「送出表單資料」，而不是「導向另一個頁面」，兩者背後代表的行為不一樣，對應到的標籤選擇也應該不同。初學者常犯的錯誤，是每個欄位之間沒有清楚的標籤對應關係，或是把整個表單直接寫成一堆沒有語意的容器加文字，雖然畫面看起來一樣，但對於使用輔助工具瀏覽網站的使用者來說，體驗會有明顯落差。
頁尾的結構範例：資訊分區與連結整理
頁尾出現在頁面最下方，通常包含公司資訊、聯絡方式、社群連結，以及一些次要的頁面連結，例如隱私權政策或服務條款。從結構上來看，整個頁尾會用一個代表「頁尾區塊」的語意標籤包起來，裡面再依照資訊性質分成幾個區塊，例如一區放公司簡介與地址，一區放常用連結清單，一區放社群媒體圖示連結。
因為頁尾裡經常出現好幾組性質不同的連結，把它們分別用清單的方式整理，而不是全部混在一起變成一長串文字，除了畫面上比較容易排版之外，對於使用輔助工具閱讀網頁的使用者來說，也能更快理解每一組連結分別代表什麼類別的資訊。這種把相關項目分組、每組內部再用清單呈現的做法，其實跟前面提到的導覽列邏輯是一致的，都是把「一組相關的項目」用清單結構表達出來。
語意化標籤選擇的整體原則
看完前面幾個元件的結構範例，可以發現一個共通的原則：每個標籤的選擇，都應該對應到這個區塊在頁面上真正扮演的角色，而不是單純看它畫面上呈現的樣子。標題該用標題標籤、清單該用清單結構、表單裡的動作按鈕跟導向連結的按鈕該用不同的標籤，這些選擇背後的邏輯，都是讓瀏覽器、搜尋引擎、以及輔助工具能夠正確理解這個頁面「內容的意義」，而不只是「畫面的樣子」。
如果把整個網頁都用沒有語意的容器標籤堆疊出來，再全部透過樣式調整成想要的外觀，畫面上或許看起來沒有差別，但對機器來說，這樣的頁面幾乎等於一片空白，無法判斷哪裡是導覽、哪裡是主要內容、哪裡是次要資訊。這也是為什麼建議初學者在學習網頁設計的過程中，花時間理解結構背後的語意邏輯，而不是只學會怎麼把畫面排出來，長期而言，這會是決定一個網站好不好維護、好不好被理解的關鍵基礎。
常見問題
問題：學HTML結構，一定要先學會CSS或JavaScript嗎？
不需要。理解HTML結構本身就是一個獨立的學習階段，建議先把每個常見元件的階層關係跟語意標籤選擇搞清楚，之後再學怎麼用CSS調整外觀、用JavaScript加上互動效果，會更容易建立起完整的架構觀念。
問題：為什麼要區分表單裡的送出按鈕跟一般的行動呼籲按鈕？
因為兩者代表的動作不同，送出按鈕的作用是提交表單資料，而行動呼籲按鈕通常是導向另一個頁面。如果混用，可能會造成非預期的行為，例如點擊連結卻意外觸發了表單送出，或是使用輔助工具的使用者無法正確理解這個按鈕實際的作用。
問題：導覽列裡的下拉選單，結構上該怎麼理解？
可以理解成清單裡面又包了一層清單，外層清單項目代表主選項，內層清單則代表這個主選項底下的子選項群組，這種巢狀清單的結構，能清楚表達出選單之間的層級關係。
問題：自己刻的網頁，一定要完全照這些結構做嗎？
沒有絕對的標準答案，但這些結構範例反映的是比較符合語意、也比較容易維護的做法。剛開始學習時，建議盡量照著這些邏輯練習，等到熟悉之後，自然能依照實際情況做出合適的調整。
如果你正在學習網頁設計，未來想承接客戶的網站專案，除了HTML結構之外，網站上線後能不能被搜尋引擎正確理解也是很重要的一環，創昇SEO提供免費的網站健檢，協助你了解一個網站在結構與內容上還有哪些可以優化的地方。
如果想更進一步了解結構與SEO之間的關聯，創昇SEO也提供全台免費到府解說，由專人實際說明給你聽，不必自己一個人摸索。