HTML5 语义元素


语义= 意义.

语义元素 = 元素的意义.


什么是语义元素?

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

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

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


浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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>

下载后,将以下代码放入的网页中:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素