HTML5 語意文件結構 過去 HTML 4.01 時代，總是用 div 標籤搭配 class 屬性，來定義文章中像是「部落格名稱」「日誌」「日誌回文」「月曆導覽」「廣告欄」⋯等各個不同意義的區段。到了 HTML5，特別針對網頁文章的慣用結構，定義了適切的語意標籤，方便使用者規劃網頁文件的結構，也提升未來資料被搜尋時的規劃效率。 參考範本 <!DOCTYPE html> <html lang='zh-TW'> <head> <meta charset='utf-8'/> <title>網站標題</title> <link href='圖示.ico' rel='icon'/> <link href='樣式.css' rel='stylesheet'/> <script src='腳本.js'></script> </head> <body> <nav>導覽（網站主選單）</nav> <article> <header> <h1>文章主標題（部落格名稱）</h1> <h2>副標題（部落格簡介）</h2> </header> <hr/> <section> <h3>子標題（今天發的網誌）</h3> <p>內文（我今天跑去觀落陰）</p> <figure> <img src='圖檔.png' alt='插圖'/> <figcaption>圖片文字說明（有圖有真相）</figcaption> </figure> <table> <tr><td>表格</td><td>表格</td><td>表格</td></tr> <tr><td>表格</td><td>表格</td><td>表格</td></tr> <tr><td>表格</td><td>表格</td><td>表格</td></tr> </table> <footer> <time>時間</time><address>聯絡資料</address> </footer> </section> <hr/> <section> <h3>子標題（昨天發的網誌）</h3> <p>內文（我明天要去觀落陰）</p> <hr/> <section> <h4>次標題（回文者名稱）</h4> <p>內文（幫我向蔣公問好）</p> <footer> <time>時間</time><address>聯絡資料</address> </footer> </section> </section> <hr/> <footer> <p>註解（禁止張貼色情廣告）</p> </footer> </article> <nav>導覽（例如月曆導覽）</nav> <aside>側邊欄（例如廣告）</aside> </body> </html> 概述 一張網頁由 article（整篇文章）、nav（網站導覽）、aside（側欄） 構成，數量不拘。 article 裡面可以包含 header（頁首）、section（一節內容），footer（頁腳）。 section 裡面可以包含 h1-h6（標題）、p（內文）、figure（圖片）、table（表格），也可以有自己的 header 或 footer 用來放置 date（發文日期）或 address（發文者聯絡方式）。