HTML5新特性，語義元素
阿新 • • 發佈：2021-07-01
一、參考如下程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <!-- <header>元素主要用於定義內容的介紹展示區域.!--> <article> <header> <h1>Internet Explorer 9（這是Header）</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>這是Header應用示範的Body</p> </article> <!-- <nav> 元素用於定義頁面的導航連結部分割槽域，但是，不是所有的連結都需要包含在 <nav> 元素中!--> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a>| <a href="/jquery/">jQuery</a> </nav> <!-- <article> 元素使用例項: Forum post/Blog post/News story/Comment --> <article> <h1>這是Article</h1> <p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 釋出。</p> </article> <!-- <section> 標籤定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分。--> <section> <h1>這是Section</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section> <!-- <aside> 標籤定義頁面主區域內容之外的內容（比如側邊欄）。!--> <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>這是Aside</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> <!-- <figure>標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。--> <figure> <img loading="lazy" src="..\images\2.png" alt="The Pulpit Rock" width="304" height="228"> <figcaption>這是Figure</figcaption> </figure> <!-- <footer> 元素描述了文件的底部區域.一個頁尾通常包含文件的作者，著作權資訊，連結的使用條款，聯絡資訊等!--> <footer> <p>這是Footer</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer> </body> </html>
二、這是輸出
本文參考：
https://www.runoob.com/html/html5-semantic-elements.html