金金金上线！
话不多，只讲你能听懂的前端知识
什么是 HTML 语义化标签？
简而言之：通过标签名称就能表明其内容含义的标签
常见的 HTML 语义化标签
<main>：定义文档的主要内容区域
<header>：页面或区块的头部区域
<nav>：导航链接的容器
<section>：表示一个独立的内容区块
<article>：独立的、自包含的内容，可以脱离上下文被理解
<aside>：与主内容相关但可分离的“侧边内容”，如 侧边栏
<figcaption>：包裹独立的媒体内容，如图片、图表、代码片段、视频等
<figure>：为 figure 中的媒体内容添加标题或说明文字，提升可访问性和语义表达
<footer>：页面或区块的底部区域
为啥要用 HTML 语义化标签呢？有什么好处？
1. 提高页面的可读性和结构性
- 语义化标签让代码更具可读性，即使别的开发者接手你的代码，见标签知意，也能够快速理解页面的结构
2. 对 SEO 友好
- 搜索引擎在抓取网页内容时会优先分析语义化标签中的信息
- 例如，搜索引擎知道 `<header>` 标签通常包含页面的标题信息，`<article>` 标签表示独立的内容，
`<nav>` 标签用于导航菜单。
- 因此，语义化标签可以帮助搜索引擎更准确地理解网页内容结构，从而提升网页在搜索引擎中的排名。
3. 对无障碍友好
- 屏幕阅读器等辅助技术依赖 HTML 语义来帮助视障用户理解网页内容。
- 如果网页结构正确、语义清晰，屏幕阅读器可以根据标签的含义为用户提供更好的浏览体验。
- 例如，`<nav>` 标签可以告诉屏幕阅读器这是一个导航区域，
`<main>` 标签可以指引用户直接跳转到主要内容，从而提高无障碍访问体验
语义化标签的最佳实践
-
合理选择标签，避免过度使用
- 语义化标签在适当的场景中使用可以提升网页结构性，但过度使用则会增加页面复杂度
- 例如，如果一个页面中有多个类似的内容区块，但每个内容块并不是独立的文章，不要为每个块都使用
<article>，可以选择<section>来划分。
-
只在页面中使用一个
<main>标签- 每个页面只能有一个
<main>，因为这个标签代表页面的主要内容区域。 - 如果有多个主要内容区域，可以用
<section>或其他标签将它们组合起来，但不要重复使用<main>标签。
- 每个页面只能有一个
-
避免在语义化标签中嵌套不必要的
<div>- HTML 语义化的一个重要目的就是减少不必要的容器标签。
- 使用语义化标签后，可以减少
<div>的使用，只在确实需要布局或样式控制时使用它们。
-
使用
<h1>到<h6>标签构建清晰的标题层级- 在 HTML 语义化设计中，合理的标题层级有助于页面结构化。
- 在每个
<section>或<article>中都使用合适的标题标签（如<h2>、<h3>等），建立层次分明的内容结构。
总结
用语义化标签的好处
- 提高可读性
- 对 SEO 友好
- 对无障碍友好
编写有误还请各位指正，万分感谢。
