- 在 HTML 5 出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。在文章网页时代就需要制定一个标准，使得代码更具有可读性，让其他开发人员更容易理解网页结构
使用语义化标签有以下优点：
- 更好的呈现出内容结构
- 有利于 SEO 优化
- 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
- 尽管音视频时代大部分标签已经有更好的优化方案，但是部分标签仍然有一定的参考价值，例如 <header> 和 <footer>
- 以下是HTML5新增的语义化分区标签：
|
标签 |
说明 |
|
<header> |
区段头或页头。 |
|
<footer> |
区段尾或页尾。 |
|
<nav> |
定义导航链接的部分 |
|
<aside> |
标签定义其所处内容之外的内容 |
|
<main> |
标签规定文档的主要内容 |
|
<section> |
标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 |
|
<article> |
文章内容。 |
|
<summary> |
标签包含 details 元素的标题 |
|
<details> |
标签用于描述文档或文档某个部分的细节 |
|
<figure> |
图文信息组 (参照 <figcaption>)。 |
|
<figcaption> |
图文信息组标题 |
|
<hgroup> |
标题组。 |
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页的标题</title>
</head>
<body>
<header>
<nav> </nav>
</header>
<aside> </aside>
<main>
<section> </section>
<article> </article>
<details>
<summary> </summary>
</details>
<figure>
<figuration> </figuration>
</figure>
</main>
<footer> </footer>
</body>
</html>
注
- 以上的标签均是完全独立和同等级的，可以相互嵌套使用，并不需要准从上述关系，符合相应语义的描述条件既可
- 语义化并不是任何时候都适用的，语义化的使用会让松散的 HTML 文档关系变得局限，失去原有的灵活性。很明显的是使用 <div> 时，我们并不需要清晰的确定它的使用场景，并且依靠 id 和 class 属性已经足够使标签达到语义化，这也是为什么现在不提倡在网页上使用语义化了。