语义学是研究语言中词义的一种语言。语义元素 = 元素有意义。

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

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

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

HTML5 语义元素支持所有的现代浏览器。此外，您还可以“告诉”旧浏览器如何处理“未知元素”。

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

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

HTML5 <section> 元素
<section> 元素定义文档中的一个部分.
根据 W3C’s 对 HTML5 的描述: “A section is a thematic grouping of content, typically with a heading.”
主页通常可以分为引言、内容和联系人信息几个部分。

HTML5 <article> 元素
<article> 元素规定不依赖，自包含内容.
一个 article 应该是有意义的，它应该有可能独立地阅读它的其余部分的网站.
下面是 <article> 元素的使用实例:

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

在 <section> 中嵌套 <article> 或者相反?
<article> 元素规定不依赖，自包含内容.
<section> 元素定义文档你的一个段落.
我们可以使用定义来决定如何嵌套这些元素? 不，我们不能！
因此，你会看到在 HTML 页面中 <section> 元素包含 <article> 元素, <article> 元素也可以包含 <sections> elements。
你也会看到 <section> 元素包含 <section> 元素, 并且 <article> 元素包含 <article> 元素。

HTML5 <header> 元素
<header> 元素指定一个文档或者章节的标题。
<header> 元素应作为介绍内容的容器。
在一个文档中可以有多个 <header> 元素。

HTML5 <footer> 元素
<footer> 元素指定文档或者章节的页脚。
<footer> 元素应包含其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款的链接、联系人信息等。
在一个文档中你可以有几个 <footer> 元素。

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

HTML5 <aside> 元素
<aside> 元素定义一些边栏内容（像边栏）。边栏内容应与周围内容有关。

HTML5 <figure> 和 <figcaption> 元素
图形标题的目的是为图像添加视觉解释.
HTML5, 图像和标题可以组合在 <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 语义的理想：“可以让数据共享和跨应用程序重用，包括企业和社区。”