HTML5 语义元素

语义= 意义。

语义元素 = 元素的意义。

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容。

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容。

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法。

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id=“nav”>, <div class=“header”>, 或者 <div id=“footer”>, 来指明导航链接, 头部, 以及尾部。

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>

HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

实例

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <article> 元素