什么是语义 HTML ？
语义 HTML，也称为语义标记，是指使用 HTML 标签来传达其中包含的内容的含义（或语义）。
通过向页面添加语义 HTML 标签，您可以提供有助于定义页面不同部分的角色和相对重要性的附加信息。
与非语义 HTML 不同，非语义 HTML 使用不直接传达含义的标签。
语义 HTML 标签是定义其所包含内容的含义的标签。
例如，<header>、<article> 和 <footer> 等标签是语义 HTML 标签。 它们清楚地表明了它们所包含的内容的作用。
另一方面，像 <div> 和 <span> 这样的标签是非语义 HTML 元素的典型示例。 它们仅充当内容持有者，但没有表明它们包含什么类型的内容或内容在页面上扮演什么角色。
image cite from www.semrush.com/blog/semant…
下面介绍一些文档网站：
- MDN Web Docs
MDN 是 Web 技术的综合性文档,其中有专门介绍 HTML 语义化的页面:
developer.mozilla.org/zh-CN/docs/…
这篇文章总结了语义化的优点,列出了常见的语义化元素,是理解 HTML 语义化的很好文档。
- W3C 标准
W3C 是制定 Web 标准的组织,其 HTML 规范中对各元素做了语义描述:
可以在每个元素的描述部分看到它的语义作用。
- Web Content Accessibility Guidelines (WCAG)
WCAG 是 Web 无障碍需求标准,其中也涉及到语义化的内容:
说明了语义化的重要性,利于提高网页无障碍访问能力。
- Schema.org
Schema.org 提供了语义化标记的方案,被广泛用于 SEO:
它定义了代表不同内容的语义化标签。
- Google Webmaster
Google 对语义化HTML也有相关的开发文档:
developers.google.com/search/docs…
介绍了像
<article>、<section>这样的标签的重要性。
为什么要使用语义 HTML ？
除了语义 HTML 标签更易于阅读和理解（例如，由 Web 开发人员审查代码）这一显而易见的原因之外，还有两个更具体的原因说明为什么您应该始终使用语义标签。
无障碍
对于视力正常的用户来说，很容易识别网页的各个部分。 页眉、页脚和主要内容都一目了然。
然而，对于盲人或视力障碍并依赖屏幕阅读器的用户来说，这并不容易。
正确使用 HTML 语义标签将使这些读者更好地理解您的内容，因为他们的屏幕阅读器将更准确地传达您的内容。
搜索引擎优化
语义 HTML 标签对于 SEO（搜索引擎优化）很重要，因为它们表明了标签中内容的作用。
这些信息可以让搜索引擎抓取工具（例如 Googlebot）更好地理解您的内容。 这增加了您的内容被选为在搜索引擎结果页面 (SERP) 上相关关键字排名的候选内容的机会。
简而言之，正确实现语义 HTML 的页面在 SEO 方面比没有正确实现语义 HTML 的页面更有优势。
HTML语义标记的类型
语义标签可以定义网页的不同部分。
根据它们的用法可以分为两类：
- 结构的HTML语义标记
例如：
<header><nav><main><article><section><aside><footer>
- 文本的HTML语义标记
例如：
<h1>(heading)<h2>to<h6>(subheadings)<p>(paragraph)<a>(anchor)<ol>(ordered list)<ul>(unordered list)<q>/<blockquote>:<em>(emphasis)<strong>(strong emphasis)<code>
案例分析
Acwing首页
AcWing 是我当初学习算法的平台，很赞
可见做到了语义化
Bilibili首页
基本就是用<div>，但是我觉得也能表示出来每个<div>的意思。
如果有的内容有语义化的标签可以使用，但对于一些并没有现成的语义化标签的部分，或许使用<div>＋ id 属性 更加能显得规整。
从我的理解来说，语义化只是一种标准，为了便于团队开发和维护、提升用户体验，有助于爬虫抓取更多的有效信息，但是企业或开发团队内部制定的标准也许更利于本项目的开发。
