前言
HTML语义化标签（Semantic HTML tags）指的是那些能够明确表达其内容和结构含义的HTML标签。与非语义化标签（如<div>、<span>）相比，语义化标签不仅描述了内容的结构，还传递了其含义，有助于搜索引擎优化（SEO）和提高网页可访问性。
常用的语义化标签
-
<header>：表示页面的头部，通常包含导航、网站名、logo等内容。 -
<footer>：表示页面的底部，通常包含版权信息、联系方式等内容。 -
<article>：表示一篇独立的文章或内容块，可以单独使用和发布。 -
<section>：表示文档中的一个章节或区域，通常包含一组相关内容。 -
<nav>：表示页面中的导航菜单，通常包含链接到其他页面或网站部分的导航条。 -
<aside>：表示页面中与主体内容略有关系但可以独立的内容（如侧边栏）。 -
<main>：表示页面的主要内容区域，通常包含页面的核心内容，排除头部、侧边栏和底部等部分。 -
<figure>和<figcaption>：<figure>用于包含图像、视频、插图等内容，而<figcaption>提供该内容的标题或说明。 -
<mark>：用于标记被高亮的文本，通常用于搜索结果中的关键词突出显示。 -
<details>和<summary>：<details>用于创建可折叠的内容块，<summary>为该内容块提供一个可点击的标题。
分析常用网站的语义化标签使用场景
掘金
掘金的首页用到了如 header、main、nav、aside等等的语义化标签，从这些语义化标签我们也可以很好的辨识出整个web网页的布局结构，可以让开发者更直观地理解网页结构。
Vue.js 官网
React官网
语义化标签的优势
- 提高可访问性：语义化标签帮助屏幕阅读器和辅助设备更好地理解网页结构，改善残障人士的浏览体验。
- 搜索引擎优化（SEO） ：语义化标签能让搜索引擎更容易理解网页内容，提高页面的搜索排名。
- 代码可维护性：使用语义化标签可以提高代码的可读性和可维护性，开发者可以更直观地理解网页结构。
- 一致的外观与行为：语义化标签通常带有默认样式，能够使页面呈现更一致的外观。
总的来说，HTML语义化标签通过清晰地描述内容的角色和结构，帮助浏览器、搜索引擎和用户更好地理解网页内容。
