必须且只能出现一次，它是页面级唯一语义锚点，代表整个文档主体；嵌套会导致屏幕阅读器跳转失效、seo降权及lighthouse报错，实操中需确保直接包含h1–h6且包裹实际渲染内容。
<main></main>必须且只能出现一次，否则屏幕阅读器跳转失效、SEO权重分散、Lighthouse直接报错。
为什么不能嵌套在或里
很多开发者把文章内容包进<article></article>后，再在外面套一层<main></main>，这是错的。<main></main>是页面级唯一语义锚点，代表整个文档的主体内容区域；而<article></article>是可复用、可独立分发的内容单元（比如一篇博客、一条新闻），它可能出现在搜索页、侧边栏甚至邮件摘要里——这些地方显然不该有第二个<main></main>。
常见错误现象：
- NVDA/VoiceOver 的“跳转到主要内容”快捷键（如 Ctrl+Alt+O）完全失效
- axe 工具报错：
ARIA: main role must not be a descendant of another landmark - Google 抓取时因结构歧义，降低页面核心内容权重
实操建议：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- SPA 场景下，
<main></main>应包裹实际渲染区域（如#app内部），而非只套静态壳层 -
<main></main>必须直接包含至少一个h1–h6，否则部分爬虫视为“无实质内容” - 服务端渲染时，若模板中
<main></main>被条件注释或动态移除，需确保 fallback 内容仍符合语义流
nav、aside、section 怎么选才不破坏可访问性
标签不是“能用就用”，而是“该用才用”。滥用反而让辅助技术误判优先级、让 SEO 降权。
常见错误现象：
- 把 logo、搜索框、用户头像塞进
<nav></nav>，导致屏幕阅读器读出一堆“navigation, navigation…” - 用
<div class="sidebar"> 替代 <code><aside></aside>，失去上下文关联语义 - 连续两个
<section></section>主题一致（如“产品介绍”+“产品参数”），硬拆导致标题流断裂 -
<nav></nav>只包裹导航链接；logo、搜索框、头像归入<header></header> -
<aside></aside>必须与当前上下文强相关（如博客文末的作者简介），纯广告位用<div data-module="ad-banner"> <li>主题一致的区块优先合并，用 <code>h2/h3分层，而非靠多个<section></section>堆砌 - 多个导航区必须加
aria-label：主菜单用aria-label="主导航"，页脚用aria-label="友情链接"，面包屑用aria-label="当前位置" - 统一使用
data-module="header"、data-module="product-grid"，版本号用data-version="2.1" - 查询时用
document.querySelectorAll('[data-module="header"]')，既稳定又支持多实例 - 禁止用
id做模块标识：循环渲染商品卡片时，id="card-1"会重复，document.getElementById()只返回第一个 - 配合构建流程，CI 可校验
data-module值是否存在于文档规范中，提前拦截不一致 - 用三层
<div> 模拟 <code><header><nav><ul></ul></nav></header>，既无语义又难定位 - JS 查询时依赖深度选择器如
.wrapper .content .inner p，样式一动就断 - Chrome DevTools 中右键节点 → “Break on” → “Attribute modifications” 才能暴露冗余包裹层
- 能用
<header><nav><ul></ul></nav></header>就别用三层<div> <li>检查现有结构：两个相邻 <code><section></section>若主题一致，考虑合并并用h2分隔子区块 - DocumentFragment 分批插入，避免一次性操作深层嵌套节点
实操建议：
data-module 比 class 更适合 JS 锚点
靠 class="header-v2" 或 id="product-list" 绑定 JS，等于把样式逻辑和交互逻辑焊死。一旦改名或复用组件，document.querySelector('.header-v2') 就静默失效。
实操建议：
嵌套超过三层就必须重构
DOM 层级过深不仅拖慢渲染，更让审查元素变成寻宝游戏：div > div > div > p 结构里，改个文字颜色可能要翻五层 CSS 选择器。
容易踩的坑：
实操建议：
真正卡住长期维护的，从来不是 class 名怎么写，而是 <main></main>有没有被误嵌套、<nav></nav>有没有漏掉 aria-label、data-module有没有被当成临时 class 乱用——这些细节不守住，HTML 骨架就塌了第一根梁。
