網頁呈現是由許多標籤所組成的區塊，再像疊積木一樣堆疊而成。
HTML5 提供了各種基本區塊和常用元素，在設計網頁時，合理使用這些標籤有助於組織網頁的內容結構，使其更具語義化、可訪問性和搜尋引擎優化，同時也能提供良好的使用者體驗和視覺效果唷。

今天會跟大家介紹幾個 HTML5 的網頁基本區塊和常見區塊如何應用！

基本區塊​

❶ < header >頁首
位於網頁頂部，用於組織和展示網站的頂部區塊，並提導覽和互動的功能，提供使用者更方便的瀏覽體驗。
▸ 常見元素
網站資訊：網站標題、 Logo
瀏覽互動：主導覽選單、搜尋欄、語言切換

❷ < nav >導覽列
具有網站資訊的導覽功能，通常位於 <header> 中，也可獨立出一個區塊延展出更多層次的連結選項，較好維護也方便使用者尋找所需的內容。
▸ 常見元素
導覽選單、內外部連結、內容或分類標籤

❸ < main >主要內容
一個網頁只能有一個 < main > 主要區塊，包含網站的主要文章內容、頁面的結構元素，其內容變化性多元，用來展現網頁的獨特性，呈現整體視覺跟資訊。
▸ 常見元素
文章內容：主要文章、新聞、部落格
頁面結構：標題、段落、條例清單、表格
媒體內容：圖片、媒體、音訊
互動表單：註冊、聯絡表單

❹ < footer >頁尾
位於網頁底部，做為頁面收尾的區塊，提供網站的相關資訊和附加功能，在瀏覽完整個頁面後，還能繼續連結其他頁面或瞭解相關資訊。
▸ 常見元素
版權資訊：版權歸屬、版權標誌、使用條款

聯絡方式：電話、地址、信箱、社群連結
網站地圖：全站頁面連結、常見問題、隱私政策
次要元素：社群分享、返回頂部按鈕、搜尋欄

常見區塊

❺ banner 橫幅
此內容為非標籤之常見區塊，通常位於首頁頂部，作為使用者入站內的第一印象，放置重點資訊與吸睛的效果，有助於使用者快速了解網站，進入狀況。
▸ 常見元素
主視覺形象、標題 Slogan 、網站重點介紹、媒體廣告

❻ < aside >側邊欄
通常置於主要內容旁邊，內容與主要內容有一定的關聯性，但並不是主要的一部分，而是補充資訊的附屬區塊，有助於提供更完整和豐富的網頁內容。
▸ 常見元素
附屬內容：側邊欄、工具欄、相關文章
廣告區域：橫幅廣告、嵌入式廣告
狀態訊息：作者資訊、更新日期

​

❼ < section >區塊
可獨立且重複使用的區塊，按照不同的主題或區域組織網頁內容，使網頁結構清晰、層次分明。
▸ 常見元素
主題區域：新聞內容、產品介紹、服務項目
獨立內容：完整的文章（可單獨引用或展示）

​

❽ < article >文章區塊
可獨立且重複使用的文章區塊，在此定義自己的樣式和行為，不受外部樣式的影響，增加設計的靈活性。
▸ 常見元素
獨立內容：一篇文章、一篇報導、一則貼文

< article > 與 < section > 類似，差別在 < article > 主要用於放置文章內容。