下面是HTML5的一部分新的语义元素：
• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time
由于这些元素的语义很丰富，相信你可能会猜出其中大部分元素的作用。
为了说得更清楚，下面给出一张图示。
header和footer的作用不言自明，nav将创造一个导航条或者菜单条。此外，你可以用section和article将页面内容分为几个部分。最后，aside元素用来安置附带的内容，比如说，以边栏的形式放上一些相关链接。
下面是一个简单的例子，其中的代码就用到了这些元素。
1 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /></head><body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Footer - Copyright 2011</footer></body></html>
当然，在这个例子里，我也引出了另外几个新元素。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。