语义化标签需精准承担内容职责：main必须唯一且不嵌套，aside强调相关性而非位置，article要求可独立分发，section须有主题，nav仅包裹主要导航路径。
语义化标签不是“换掉div就完事”，而是让每个标签都承担明确的内容职责——用错一个，屏幕阅读器跳转错、搜索引擎抓取偏、后续改版踩坑多。
main 必须唯一且不嵌套
浏览器和辅助技术靠 main 定位页面核心内容，重复或嵌套会直接破坏可访问性流。常见错误包括：main 套在 article 里、多个 main 并列、在页脚区域又塞一个 main。
-
main应包裹整个页面主体流（含标题、正文、列表等），但不能包含全局header/footer/nav - 模块级内容（如卡片列表）用
section或article，别硬塞main - 检查方法：开发者工具的 Accessibility 面板里，
main只应出现一次，且大纲树中它下面有连续的 heading 和段落节点
aside 不是“右边那块”而是“可删不伤主逻辑”
aside 的语义锚点是相关性与非必要性，不是视觉位置。把它当“右栏容器”用，等于把布局意图写进语义层，后期响应式折叠时反而难处理。
- 适合场景：文章里的术语解释、作者简介、关联推荐、侧边广告（需与当前
article或section主题强相关） - 不适合场景：全站通用的右侧导航、无关的第三方推广、没上下文的天气插件
- 若内容与当前区块弱相关，优先用
section；完全无关，就用div
section 和 article 别凭“长得像”选
区分关键在“是否可独立分发”。搜索引擎和 RSS 阅读器会按 article 抓取并重用，而 section 只是文档内部分组。
-
article必须自带完整语义：有标题（h2–h6）、能单独成页（复制整段 HTML 到新页面仍合理） -
section必须有主题，且建议带标题；纯视觉分隔（如只为了加 margin）不如用div - 错误示范：
section包裹整页导航 + 主内容 + 侧边栏 —— 这是结构塌方，不是语义化
nav 要管“路径”，不管“样式”
nav 是给导航路径打地标，不是给菜单栏加 class。滥用会导致屏幕阅读器用户听到一堆“导航”却找不到重点。
- 必须包裹一组**主要导航链接**：主导航、站点地图、文章目录（toc）
- 面包屑、分页、筛选控件、操作按钮组，都不算
nav，可用ol+aria-label="breadcrumb" - 一个页面通常只需 1–2 个
nav：顶部主导航 + 页脚站点地图足够；每个卡片里再包一层nav是反模式
最常被忽略的是嵌套合法性：main 不能在 article 内，header 可以在 article 内，但 header 里不能再嵌 header。这些规则不是浏览器报错的硬限制，而是辅助技术解析时的隐性契约——看不见的断裂，比控制台报错更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
