介绍
HTML5 是一种用于创建和展示 Web 内容的 Web 标准，它引入了许多新特性和功能，其中一些是新的语义标签，HTML5 通过语义标签使得 web 页面和 web 应用程序更易于理解和维护，同时也能够增强搜索引擎的能力。
本文将总结介绍 HTML5 新晋级标签，并附上实例帮助读者理解标签应用。
1. section标签
1.1 定义
HTML5中的section标签可用于定义文档或应用程序中的节或区域。
通常情况下，section 元素包含标题和内容，并可以将文档分割为多个主题区域。在语义上，在网页上使用 section 标签允许使分栏更加明确，也方便搜索引擎更好地理解我们网页的结构。
1.2 举例
<section>
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
上面代码片段中使用 section 元素将文档分成了两部分。
使用场景：
1.将不同的文章部分或章节清晰地区分出来；
2.在一个长文档中分为章节、大节、小节等。
3.普通网页中使用很少，一般用在网站的架构的页面上。
2. header标签
2.1 定义
header 通常用于包含整个页面或单独的部分的标题、logo、搜索框等内容，并提供导航菜单。 通常情况下，header 元素包含了一个或多个 h1-h6 标题元素，与 nav 元素一起使用通常在内容周围创建页面导航。
2.2 举例
<header>
<h1>Your Website Name</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
上面代码片段中使用 header 元素包含了一个 h1 标题元素和 nav 元素，用于创建页面导航。
使用场景：
1. 在页面顶部或其他常用位置放置网站或页面的标题；
2. 在页面中放置常驻导航菜单；
3. 如果网站包含“标头”元素，则通常会使用该元素；
4. 自定义头部元素和标记“头部”。
3. aside标签
3.1 定义
aside 消息通常包含与内容相关的辅助信息。这可能是侧栏，只是文档的相关术语或其他内容。 除此之外，aside 元素还用于将与主要内容无关的内容置于到文档的一侧。
3.2 举例
<aside>
<p>Related Side Information</p>
<p>Other information here.</p>
</aside>
即便一篇文章或者主体内容是 "如何在 HTML 中使用 aside"，这段旁边的 "related side information" 也可以使用 aside 标签（提供背景、历史、它的使用场景等超出主体范围的内容）。
使用场景：
1.广告；
2.类似导航条的侧边栏；
3.与主题内容无关的辅助内容或使读者了解主题内容的信息。
4. nav标签
4.1 定义
nav 元素定义页面导航链接的部分。 这些链接可能是站点的主要菜单，也可能是文档的附加导航元素。
4.2 举例
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</nav>
上面代码片段中使用 nav 元素作为页面导航链接的部分。
使用场景：
1.主要导航；
2.站点中的辅助菜单，其中的元素少于主要菜单；
3.将文章或内容区域上下文组织为若干部分的栏；
4.站点页脚中的列表；
5.具有多个条目的引用列表；
6.分页导航等。
5. figure标签
5.1 定义
figure 元素表示与文档紧密相关的独立内容，例如图片、表格等。
5.2 举例
<figure>
<img src="image_url" alt="image">
<figcaption>图片描述</figcaption>
</figure>
上面代码段中使用 figure 元素把图片和图片描述放在一起。
使用场景：
1.放在一起的图像（图片，图形），以及其描述文本；
2.自包含的媒体对象（图像和视频）；
3.照片，插图，表格，代码清单等的组或默认大小对象；
4.一组视觉元素和它们的标题。
6. article标签
6.1 定义
HTML5中的article标签代表独立的内容部分，在语义上表示文章、博客或用户生成的内容。
6.2 举例
<article>
<h1>Title of the article</h1>
<time>Publish Time</time>
<p>This is the content of the article.</p>
</article>
上面代码片段中使用 article 标签定义了一篇文章的标题、发布时间和内容。
使用场景：
1.新闻文章；
2.博客文章；
3.音乐、文章或产品评论；
4.讲座或教程等独立的内容。文章中的元素不封闭于计算机和网络领域。
7. footer标签
7.1 定义
HTML5中的footer标签指页面或区域的页脚部分，类似于书籍页脚，通常包含制作页面的信息、版权、联系电话等。
7.2 举例
<footer>
<p>版权所有 © 2021。</p>
<p>联系方式：123456</p>
</footer>
上面代码片段中使用 footer 标签定义了页脚部分的版权信息和联系方式。
使用场景：
1.网站底部或页面底部的版权声明；
2.网站制作者的信息；
3.带有联系人的联系方法（例如“联系人”、“电话”或“电子邮件”）；
4.所有其他可以添加到站点结尾的文本块。
结语
HTML5 新增标签的语义化更加明确，有利于提高搜索引擎对网页内容的抓取，也有利于减少代码量，增加开发效率，同时也方便阅读和维护。以上 7 个标签都具有其独特的运用场景，对 HTML5 了解不足的开发者可以结合实际需求进行选择性使用。