01. HTML5语义标签有哪些？
01.1 常用语义标签概览
在HTML5中，header、nav、main、section、article、aside、footer等成为文档的语义骨架，帮助浏览器和屏幕阅读器理解页面结构，从而提升可访问性与内容理解度。另有 figure 与 figcaption 用于图文说明的容器，time、mark、details、summary 等标签则用于时间、标记和交互式细节的呈现。通过这些标签，网页的结构信息变得更清晰，搜索引擎也能提取出重要的内容块，有利于索引和摘要。
除了主结构外，header、footer 等还可以组合出更具层次感的页面单位，main用于主体内容，section与 article 负责将内容拆分为可复用的模块。aside 常用于辅助信息，不干扰核心段落但可提升信息密度。
<!-- 语义标签示例骨架 -->
<header><h1>网站标题</h1>
</header>
<nav><ul><li>首页</li><li>产品</li><li>联系</li></ul>
</nav>
<main><article><h2>文章标题</h2><p>核心内容段落</p></article><aside><p>侧边的附加信息</p></aside>
</main>
<footer><p>版权信息</p>
</footer>
注意，语义标签并非替代所有样式的唯一手段，而是为结构与含义提供更明确的标记，需与 CSS 与无障碍实践共同使用，确保视觉呈现与可访问性双重达标。
02. 使用要点
02.1 正确选择标签层级
在文档中优先使用<header>、<nav>、<main>、<section>、<article>、<aside>等语义标签来描述区域，而不是依赖大量无语义的<div>，以提升可读性与可访问性；导航区域应放在 <nav>，主内容应放在 <main>，内容块可按需要使用 <article> 或 <section> 进行分组。
对于非核心内容，使用<aside> 可以避免干扰主线，同时保留信息的可获取性。图片及其说明应组合使用<figure> 与 <figcaption>，以便为多媒体内容提供清晰的上下文。
<!-- 语义页面结构示例 -->
<body><header>页面头部</header><nav>导航菜单</nav><main><article>核心文章</article><aside>相关补充信息</aside></main><footer>页脚信息</footer>
</body>
02.2 与无障碍无缝对接
使用语义标签可提升屏幕阅读器的导航效率，提供跳转点和内容分区，并且能让辅助技术更好地理解页面层级；同时，确保为图片、表单控件等提供等效文本与标签，避免仅靠视觉呈现传达信息的情况。
在实现时应避免滥用标签，仅当区域具有明确语义时才使用，以免破坏结构清晰性；必要时通过 ARIA 属性增强可访问性，但第一优先仍是原生语义标签的正确使用。
<main role="main" aria-label="主要内容"><section><h2>本节标题</h2><p>内容段落</p></section>
</main>
02.3 与SEO的关系
语义化标签帮助搜索引擎更好地理解页面结构，从而提高抓取效率与内容相关性；明确的区域划分还可能提升摘要片段与出现在特定查询中的可见性。
结合结构化数据（如 JSON-LD、Microdata）时，语义标签提供的上下文更清晰，搜索引擎更易将页面内容与查询意图匹配，进而提升索引质量与点击率。
03. 优势
03.1 可访问性与可用性提升
使用HTML5语义标签可以减少对样式的依赖，屏幕阅读器能更直观地读出区域信息，这对视障用户尤为重要；此外，结构化的文档也方便键盘导航，提升整体可用性。
对于开发者来说，语义化结构更易维护、可扩展，当页面需要改版或再利用时，可以在不破坏内容的情况下重新组织区域，降低耦合度。
<article><header>文章标题</header><section>段落一</section><section>段落二</section>
</article>
03.2 维护性和可复用性
将页面拆分为清晰的语义块，有助于团队协作与代码重用，组件化的语义结构更容易被分离到模板系统中，从而提升代码的可维护性与开发效率。
此外，结合样式与交互的分离，语义标签并不会强制样式捆绑，可以在不同设备上实现一致的用户体验。
04. 对SEO的影响
04.1 结构化信息的提取与呈现
HTML5语义标签提供的清晰结构使搜索引擎更容易识别页面的主旨、段落、标题与导航序列，这有助于搜索引擎更准确地抓取并理解内容，从而提升在相关查询中的表现。
在搜索结果中，结构化的内容也更有可能获得富文本摘要或位置信息展示，提高点击率与用户体验，进而影响排名的间接因素。
<section aria-labelledby="intro"><h2 id="intro">专题介绍</h2><p>这是一个描述性段落</p>
</section>
04.2 实践要点与注意
在实际页面中，优先使用语义标签来定义结构，避免滥用 要点总结：结构清晰、可访问性优先、与结构化数据协同工作，这些因素共同促进SEO的自然提升。持续测试与评估各种设备上的渲染与可用性，确保语义标签的优势得到全面发挥。
