HTML5 语义元素
语义学（源自古希腊）可定义为对语言意义的研究。
语义元素是拥有语义的元素。
什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。
浏览器支持
| Yes | Yes | Yes | Yes | Yes |
所有现代浏览器均支持 HTML5 语义元素。
此外，您可以“帮助”老式浏览器处理“未知元素”。
在 HTML5 浏览器支持这一章学习更多知识。
HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。
HTML5 提供了定义页面不同部分的新语义元素：
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 语义元素
HTML5 <section> 元素
<section> 元素定义文档中的节。
根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。
可以将网站首页划分为简介、内容、联系信息等节。
实例
<!DOCTYPE html><html><body><section><h2>WWF</h2><p>世界自然基金会（WWF）是一个致力于环境保护、研究和恢复问题的国际组织，原名世界野生动物基金会。世界自然基金会成立于1961年。</p></section><section><h2>WWF的熊猫标志</h2><p>熊猫已经成为世界自然基金会（WWF）的象征。世界自然基金会著名的熊猫标识源于世界自然基金会成立同年从北京动物园转移到伦敦动物园的一只名叫“驰驰”的大熊猫。</p></section></body></html>
HTML5 <article> 元素
<article> 元素规定独立的自包含内容。文档有其自身的意义，并且可以独立于网站其他内容进行阅读。
<article> 元素的应用场景：
- 论坛
- 博客
- 新闻
实例
<!DOCTYPE html><html><body><article><h2>WWF 是做什么的?</h2><p>世界自然基金会(WWF) 的使命是阻止地球自然环境的退化，建设人类与自然和谐相处的未来。</p></article></body></html>
嵌套语义元素
在 HTML5 标准中，<article> 元素定义完整的相关元素自包含块。
<section> 元素被定义为相关元素块。
在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <sections> 元素的页面。
您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。
HTML5 <header> 元素
<header> 元素为文档或节规定页眉。
<header> 元素应该被用作介绍性内容的容器。
一个文档中可以有多个 <header> 元素。
下例为一篇文章定义了页眉：
<!DOCTYPE html><html><body><article><header><h2>WWF 是做什么的?</h2><p>WWF 的使命:</p></header><p>世界自然基金会(WWF) 的使命是阻止地球自然环境的退化，建设人类与自然和谐相处的未来。</p></article></body></html>
HTML5 <footer> 元素
<footer> 元素为文档或节规定页脚。
<footer> 元素应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
实例
<!DOCTYPE html><html><body><footer><p>Posted by: Hege Refsnes</p><p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p></footer></body></html>
HTML5 <nav> 元素
<nav> 元素定义导航链接集合。
<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！
实例
<!DOCTYPE html><html><body><nav><a href="/html/">HTML</a> |<a href="/css/">CSS</a> |<a href="/js/">JavaScript</a> |<a href="/jquery/">jQuery</a></nav></body></html>
HTML5 <aside> 元素
<aside> 元素页面主内容之外的某些内容（比如侧栏）。
aside 内容应该与周围内容相关。
实例
<!DOCTYPE html><html><body><p>今年夏天，我和我的家人参观了迪士尼未来世界。</p><aside><h4>迪士尼未来世界</h4><p>Epcot Center是迪士尼的高科技馆，在佛罗里达。</p></aside></body></html>
HTML5 <figure> 和 <figcaption> 元素
在书籍和报纸中，与图片搭配的标题很常见。
标题（caption）的作用是为图片添加可见的解释。
通过 HTML5，图片和标题能够被组合在 <figure> 元素中：
<!DOCTYPE html><html><body><p>布道石地处挪威南部，靠近斯塔万格市的吕瑟峡湾中部，是一块天然形成的巨石，突兀地直立于峡湾深处的崇山峻岭中，垂直落差604米，顶部有大约625平方米的平台。</p><figure><img src="/images/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"><figcaption>Fig.1 - 布道石, 挪威.</figcaption></figure></body></html>
<img> 元素定义图像，<figcaption> 元素定义标题。
为何使用 HTML5 元素？
如果使用 HTML4 的话，开发者会使用他们喜爱的属性名来设置页面元素的样式：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …如此，浏览器便无法识别正确的网页内容。
而通过 HTML5 元素，比如：<header> <footer> <nav> <section> <article>，此问题迎刃而解。
HTML5 中的语义元素
下面列出了以字母顺序排列的 HTML5 新语义元素。
| 标签 | 描述 |
|---|---|
| <article> | 定义文章。 |
| <aside> | 定义页面内容以外的内容。 |
| <details> | 定义用户能够查看或隐藏的额外细节。 |
| <figcaption> | 定义 <figure> 元素的标题。 |
| <figure> | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| <footer> | 定义文档或节的页脚。 |
| <header> | 规定文档或节的页眉。 |
| <main> | 规定文档的主内容。 |
| <mark> | 定义重要的或强调的文本。 |
| <nav> | 定义导航链接。 |
| <section> | 定义文档中的节。 |
| <summary> | 定义 <summary> 元素的可见标题。 |
| <time> | 定义日期/时间。 |