HTML5 语义化标签

[jtwang7]

参考：

• HTML5 语义元素

语义化标签

作用：特定语义标签有特定的功能和含义，它能够清楚地将其意义描述给浏览器和开发者。 HTML5新增的语义标签(除了<figcaption>外，都是块元素)：

<header>：描述了文档的头部区域，在页面中你可以使用多个<header> 元素。
<nav>
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article>：定义独立的内容。.
<aside>：定义页面主区域内容之外的内容（比如侧边栏），aside 标签的内容应与主区域的内容相关。
<figcaption>
<figure>
<footer>：描述了文档的底部区域。

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>

figure & figcaption

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。 <figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

简单理解，<figure>标签的作用就是包裹一组流内容，隔绝流内容和其他区块，防止流内容变动影响文档流。

<figcaption> 标签定义

元素的标题. <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

优点

1. 标签语义化有助于构架良好的HTML结构。
2. 有利于搜索引擎的建立索引、抓取。
3. 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
4. 有利于构建清晰的机构，有利于团队的开发、维护。