網頁如何布局？一直是網站設計網站制作中一個常會談到的話題，總結起來就是頭部、內容、側欄、底部幾個“盒子(Box)”的集合等。看似一個簡單的問題在網頁設計中會隨著網站越來越龐大交錯，而變得越來越復雜。所以網站設計師在工作中也要按照正確的規范來進行，否則可以會因為不符合現行的規范，而造成一些邏輯不正確，或是設計元素無法使用的問題。
為什么要規范網頁布局的標簽使用及命名？
首先，html5提出了標簽邏輯化，在標簽本身已經規范了內容的使用，無論在頁面體驗還是搜索引擎親和方面都是大勢所趨。
其次，對于一個網站的代碼編寫，尤其是結構復雜的大項目難免涉及到多人合作、接替的工作內容，因此規范化的使用標簽及命名能更好的讓多人“兼容”在一起，減少因工作交接而耽擱的工作進程時間。
結合HTML5標簽介紹網頁布局方式的規范
規范一，為整個頁面添加“容器”標簽
這是一種形象的比喻，將整個頁面比做一個房間，那么我們需要為這個房間起一個名稱標簽，以便罩住、囊括里面所有的頁面元素。簡單的說就是在body內設置一個最外層“div”，有了它我們可以控制整張網頁的位置——居左、居右、居中。在名稱標簽的命名上可以最直觀的標寫<div id=”page”>。
規范二，用<Header>定義頁面的“頁眉”部分
在網站設計網站制作中“頁眉”部指的就是網頁的頂部部分，又稱為head或header。這部分內容包括：網站名稱、LOGO、主導航、Banner內容。在代碼編寫時，統的做法是：使用 <div id=”header”> 來定義網頁的頭文件部分。
HTML5直接提出了用<header>標簽來更直觀的告訴web開發者與搜索引擎：這里是相對父級的頭部/頂部/頁眉部分。header標簽可以在頁面里重復出現，我們可以將作為頁面布局的header標簽命名為 id=”masthead”或其他。
規范三，用“Content”命名頁面的主要內容部分
企業網站中每個頁面都有它的主要部分，如文章頁里面的文章、列表頁的文章標題列表。html5對于這部分內容提供了<article>標簽，但在實際工作中，主要內容頁面還面包屑、廣告位、評論等內容，這時我們可以單獨設置一個<div=”content”> 來定義它為頁面內容部分。
頁面的主要內容依據不同層次的頁面，其內容各自不同，如網站首頁內部則由多個“部分”組成。每一塊內容我們可以使用 <section> 標簽定義。而<article> 標簽我們用于定義頁面內的主題內容。
規范四，用 “Sidebar”命名頁面的輔助信息部分
Sidebar是頁面布局中稱為“側欄”或“邊欄”，它往往是頁面的可選部分。Sidebar內放置的是相對于Content的相關內容或輔助內容，如“最新文章”、“熱門文章”等。html5的新標簽<aside>代表與頁面內容相關、有別于主要內容的部分。
規范五，用<Footer>定義頁面的頁腳部分
了解了header標簽之后我們就不難了解footer標簽了，它是相對于父級的底部/頁腳部分。由于網站底部內容主要是體現版權類信息，所以我們可以為footer標簽命名為“colophon”。
北京分形科技有限公司成立于2003年，是一家以AI為核心驅動力，提供網絡品牌策劃、AI互聯網服務、WEB3服務、AI人工智能解決方案的綜合服務商
我們一直秉承的經營理念：責任、熱情、品質、包容
主要業務范圍：AI互聯網服務（網站建設,網站群,短視頻社交平臺,APP,小程序）AI人工智能行業解決方案（智慧博物館,智慧公園,智慧景區,智慧社區,智慧醫療,智慧校園,）IoT智能物聯產品（智能步道,AR太極,AI健身,AI導覽,AI單車,智慧樹）WEB3（區塊鏈,元宇宙,NFT數字藏品）