HTML5语义元素

语义学是研究语言中词义的一种语言.

语义元素 = 元素有意义.

什么是语义元素?

语义元素清楚地描述了它对浏览器和开发人员的意义.

非语义 元素的实例: <div> 和 <span> - 不能告诉它的内容.

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

浏览器支持

HTML5语义元素支持所有的现代浏览器.

此外，您还可以“告诉”旧浏览器如何处理“未知元素”.

阅读关于 HTML5 浏览器支持

在HTML5中新的语义元素

许多网站包含HTML代码像: <div id="nav"> <div class="header"> <div id="footer">标示导航、页眉和页脚.

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

HTML5 <section> 元素

<section> 元素定义文档中的一个部分.

根据W3C's 对 HTML5 的描述: "A section is a thematic grouping of content, typically with a heading."

主页通常可以分为引言、内容和联系人信息几个部分.

<section>
<h1>WWF</h1>
  <p>世界自然基金会（WWF）是一个国际组织工作，对于保护问题，以及环境修复研究，前身为世界野生动物基金会。世界自然基金会成立于1961。</p>
</section>

让我试试

HTML5 <article> 元素

<article> 元素规定不依赖，自包含内容.

一个article应该是有意义的，它应该有可能独立地阅读它的其余部分的网站.

下面是 <article> 元素的使用实例:

• 论坛 post
• 博客 post
• 新闻 article

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

让我试试

在 <section> 中嵌套<article> 或者相反?

<article> 元素规定不依赖，自包含内容.

<section> 元素定义文档你的一个段落.

我们可以使用定义来决定如何嵌套这些元素? 不，我们不能!

因此，你会看到在HTML页面中<section>元素包含<article> 元素, <article>元素也可以包含<sections> elements.

你也会看到 <section> 元素包含 <section> 元素, 并且 <article> 元素包含 <article> 元素.

HTML5 <header> 元素

<header> 元素指定一个文档或者章节的标题.

<header> 元素应作为介绍内容的容器.

在一个文档中可以有多个 <header> 元素.

下面的实例为文章定义一个标题:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

让我试试

HTML5 <footer> 元素

<footer> 元素指定文档或者章节的页脚.

<footer> 元素应包含其包含元素的信息.

页脚通常包含文档的作者、版权信息、使用条款的链接、联系人信息等。

在一个文档中你可以有几个 <footer> 元素.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

让我试试

HTML5 <nav> 元素

<nav> 素定义了一组导航链接.

注意，不是所有的链接的文件应该在一个<nav>元素里面. <nav> 元素仅用于主要的导航链接块.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

让我试试

HTML5 <aside> 元素

<aside> 元素定义一些边栏内容(像边栏).

边栏内容应与周围内容有关

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

让我试试

HTML5 <figure> 和 <figcaption> 元素

图形标题的目的是为图像添加视觉解释.

HTML5, 图像和标题可以组合在 <figure> 元素里面:

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

让我试试

<img>元素定义一个图片, <figcaption> 元素定义标题.

为什么使用语义元素?

使用HTML4, 开发者使用自己的id/class为这些元素: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, 等.

这使得搜索引擎无法识别正确的网页内容.

使用新的HTML5元素 (<header> <footer> <nav> <section> <article>), 这将变得更容易.

根据W3C语义的理想：“可以让数据共享和跨应用程序重用，包括企业和社区。”

在HTML5中的语义元素

下面是一个按照字母顺序在HTML5语义元素列表.

完整的HTML5 参考.