站長資訊網
html常用的結構元素有：1、div，可定義文檔中的分區或節，用于為HTML文檔內大塊（block-level）的內容提供結構和背景；2、section，表示文檔中的一個區域；3、article，表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構；4、aside，表示一個和其余頁面內容幾乎無關的部分；5、header，表示頁面頭部或區塊頭部。
前端（vue）入門到精通課程：進入學習
本教程操作環境：windows7系統、HTML5版、Dell G3電腦。
結構元素，又稱為區塊型元素，是用來定義區塊內容范圍的元素。之前，區塊型元素只有<div>一個，HTML5新增了7個語義化結構元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>
html常用的結構元素
div元素
div元素是用來為HTML（標準通用標記語言下的一個應用）文檔內大塊（block-level）的內容提供結構和背景的元素。
<div> 可定義文檔中的分區或節（division/section）。
<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
注釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個換行符。
提示：請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。
section元素
Section元素(<section>)表示文檔中的一個區域(或節)，是區塊級通用元素。比如，內容中的一個專題組，一般來說會有包含一個標題(heading)。一般通過是否包含一個標題(<h1>-<h6> element)作為子節點，來辨識每一個<section>
[注意]如果元素內容可以分為幾個部分的話，應該使用<article>而不是<section>；再有，不要把<section>元素作為一個普通的容器來使用，這是本應該是<div>的用法。 一般來說，一個<section>應該出現在文檔大綱中
article元素
<article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構。可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中
<article>元素的作者信息可通過<address>元素提供，但是不適用于嵌套的<article>元素；<article>元素的發布日期和時間可通過<time>元素的pubdate屬性表示
[注意]對于<article>和<section>來說，是必須要加上標題的
aside元素
<aside>元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。一般用于表示不直接相關內容的側邊欄，<aside>里面的內容與它所關聯的內容相互獨立，誰缺了誰都不影響各自文本含義的理解。如一篇文章的廣告、相關背景和引述內容等
nav元素
HTML導航欄(<nav>)描繪一個含有多個超鏈接的區域，這個區域包含轉到其他頁面，或者頁面內部其他部分的鏈接列表
并不是所有的鏈接都必須使用<nav>元素，它只用來將一些熱門的鏈接放入導航欄，例如<footer>元素就常用來在頁面底部包含一個不常用到，沒必要加入<nav>的鏈接列表
一個網頁也可能含有多個<nav>元素，例如一個是網站內的導航列表，另一個是本頁面內的導航列表
header元素
<header>元素表示頁面頭部或區塊頭部，用于將介紹內容和區塊的輔助導航分組到一起，所以它有可能包含區塊的標題元素以及其他的介紹內容(目錄、logo等)
[注意]由于<header>和<footer>元素不是分節內容，所以不會引入新的分節到大綱中
footer元素
<footer>元素表示最近一個章節內容或者根節點(sectioning root)元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息
[注意]<footer>元素內的作者信息應包含在<address>元素中
案例說明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>蘋果首頁</title> </head> <body> <nav> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">技術支持</a></li> <li><a href="#">搜索</a></li> <li><a href="#">購物袋</a></li> </ul> </nav> <article> <section>展示1</section> <section>展示2</section> <section>展示3</section> <section>展示4</section> <nav> <ul> <li>按鈕1</li> <li>按鈕2</li> <li>按鈕3</li> <li>按鈕4</li> </ul> </nav> </article> <aside> <ul> <li><a href="#">Watch</a></li> <li><a href="#">Pencil</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> </ul> </aside> <footer> <nav> <div>選購及了解</div> <div>商店</div> <div>應用</div> <div>賬戶</div> <div>關于</div> </nav> <section> <div>其他雜項</div> </section> </footer> </body> </html>
說明：main
<main>不常用，最主要的原因是IE瀏覽器都不支持
main元素(<main>)呈現了文檔<body>或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內容組成。這部分內容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重復的內容
<main>標簽不能是以下元素的繼承，包括<article>、<aside>、<footer>、<header>、或<nav>。 在一個文檔中不能出現一個以上的 <main>標簽
所以，一個正常的最外層布局應該是下面這樣
<header></header> <main> <section></section> <section></section> <section></section> </main> <footer></footer>
但現在，一般地，布局如下
<header></header> <section></section> <section></section> <section></section> <footer></footer>
（學習視頻分享：web前端入門）
