语义是语言的单词和短语的意义的研究。
语义元素是具有意义的元素。
语义化的HTML是使用HTML标记，以加强在网页和网络应用程序的语义或含义的信息，而不是仅仅来定义它的演示或看。
语义化的HTML是通过传统的网络浏览器以及许多其他用户代理处理。 CSS是用来表明其呈现给人类用户。
什么是语义元素？
语义元素清楚地描述到浏览器，开发人员都它的意义。
非语义元素的例子： <div>和<span> -告诉一无所知其内容。
语义元素的实例： <form> <table>和<img> -明确规定其含量。
浏览器支持
| 是 | 是 | 是 | 是 | 是 |
HTML5语义元素在所有现代浏览器都支持。
此外，你可以"teach"旧的浏览器如何处理"unknown elements" 。
阅读关于它在浏览器支持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 <section>元
所述<section>元素定义了一个文档中的一个部分。
根据W3C的HTML5文档： "A section is a thematic grouping of content, typically with a heading."
一个网站的主页可以被划分成介绍，内容和联系人信息部分。
HTML5 <article>元
所述<article>元素指定独立的，自包含的内容。
文章应该做出自己的感觉，应该可以从网站的其余部分独立阅读。
的其中一个实施例<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> 试一试» 嵌套语义元素
在HTML5标准，所述<article>元素定义相关元件的一个完整的，自包含块。
所述<section>元素被定义为相关元素的块。
我们可以用定义来决定如何嵌套的元素？ 不，我们不可以！
在互联网上，你会发现HTML页面<section>包含元素<article>元素，和<article>包含元素<sections>元素。
您还可以找到与页面<section>包含元素<section>元素，和<article>包含元素<article>元素。
报纸：体育articles在体育section ，有一个技术section各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:[email protected]">
[email protected]</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>元件从它被放置在内容定义了一些内容一边(like a sidebar) 。
旁白内容应与周围的内容。
例
<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>元素定义了字幕。
为什么需要语义HTML5元素？
与HTML4，开发人员使用自己喜欢的属性名称样式的页面元素：
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
这使得它不可能被搜索引擎识别正确的网页内容。
与HTML5元素，如： <header> <footer> <nav> <section> <article> ，这将变得更加容易。
根据W3C，语义网：
“允许数据共享和跨应用，企业和社区再利用。”
注意事项
在情况下，一个文件需要比在HTML单独表达更精确的语义，该文档的片段可以与有意义的类名跨度或div元素内被封闭，例如<跨度类=“作者”>和<DIV类=“发票” >。 如果这些类名称也是一个模式或本体中的片段标识符，它们可以链接到更多定义的含义。 微形式化方法在HTML语义。
这种方法的一个重要的限制是基于要素纳入这样的标记必须满足良构的条件。 由于这些文件是广泛的树型结构，这意味着从一个子树只有平衡的片段可以以这种方式进行标记。 标记式HTML的任意截面的装置将需要独立的标记结构本身，诸如的XPointer的机构。
好的语义化HTML还提高了网页文档的可访问性（也请参见Web内容无障碍指南）。[来源请求]例如，当屏幕阅读器或语音浏览器能够正确地确定一个文档的结构，也不会浪费视障用户的通过时，它已经被正确的标记读出重复或不相关的信息的时间。
在HTML5语义元素
下面是HTML5的新语义元素的字母顺序列表。
链接到我们的完整的HTML5参考 。
| 标签 | 描述 |
|---|---|
| <article> | 定义文章 |
| <aside> | 从页面内容定义内容一边 |
| <details> | 定义的其他详细信息，用户可以查看或隐藏 |
| <figcaption> | 定义了一个标题为<figure>元件 |
| <figure> | 指定自包含的内容，比如插图，图表，图片，代码清单等。 |
| <footer> | 定义页脚的文档或节 |
| <header> | 指定为一个文件或部分报头 |
| <main> | 指定文件的主要内容 |
| <mark> | 定义标记/高亮文本 |
| <nav> | 定义导航链接 |
| <section> | 定义部分文档中 |
| <summary> | 定义了一个可见的标题为<details>元件 |
| <time> | 定义日期/时间 |