HTML5语义元素



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

语义元素 = 元素有意义.


什么是语义元素?

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

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

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


浏览器支持

Yes Yes Yes Yes Yes

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

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

阅读关于 HTML5 浏览器支持


在HTML5中新的语义元素

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

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

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Semantic Elements


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 参考.

标签 描述
<article> 定义一篇文章
<aside> 从页面内容中定义内容
<details> 定义用户可以查看或隐藏的其他详细信息
<figcaption> 定义<figure> 元素的标题
<figure> 指定独立的内容, 像 图表, 插图, 照片, 代码片段等.
<footer> 为文档或节定义页脚
<header> 为文档或节指定页眉
<mark> 定义标记/突出文本
<nav> 定义导航链接
<summary> 为<details> 元素定义一个标题
<time> 定义日期/时间