一、参考如下代码
<!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="..images2.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