main 必须是 body 的直接子元素，否则会降级为普通内容节点；grid-template-areas 须与语义标签严格对应；交互模块需保持完整语义链，避免 landmark 冲突与无障碍失效。
main 必须是 body 的直接子元素，嵌套就失效
浏览器和辅助技术（如 VoiceOver、NVDA）靠标签层级识别 landmark 区域。<main></main> 是 ARIA main role 的原生映射，一旦被包在 <div> 或 <code><section></section> 里，它就降级为普通内容节点，不再被当作“页面主体”。
常见错误现象包括：
- Lighthouse 报告 “Multiple main landmarks” 或 “Main landmark not found”
- 屏幕阅读器跳过
<main></main>，或读作 “section” 而非 “main” - SEO 工具无法提取核心内容区块，影响摘要生成与权重分配
正确写法只有一种：<header></header>、<main></main>、<footer></footer> 并列作为 的直接子元素。中间不能插任何容器——哪怕只是 <div class="wrapper">。
<h3>grid-template-areas 和语义标签必须一一对应</h3>
<p>CSS Grid 的 <code>grid-template-areas 是视觉结构描述，而 HTML 标签是语义结构载体。二者不匹配时，代码可读性、可维护性和无障碍支持都会打折扣。
立即学习“前端免费学习笔记（深入）”；
比如你写了 grid-template-areas: "header header" "sidebar main" "footer footer"，HTML 就必须用 <header></header>、<nav></nav>（而非 <aside></aside>）、<main></main>、<footer></footer> 分别对应，且顺序和嵌套关系要一致。
容易踩的坑：
- 用
<section></section>去占main区域：语义错位，<main></main>应承载全页唯一主内容，<section></section>是其内部逻辑分组 - 把
<aside></aside>放进grid-area: sidebar却让它包裹广告+作者简介+相关文章——三类信息语义混杂，应拆成多个独立<aside></aside>或用<section></section>+<header></header> - 给
<main></main>加grid-column：它本身已是命名区域，再加定位属性会覆盖grid-area，调试时极难发现
复杂交互下，<article></article> 和 <section></section> 的边界必须清晰
当网格中存在可折叠面板、动态加载卡片、评分矩阵等交互模块时，每个单元的语义归属决定其是否能被 RSS 订阅、是否被屏幕阅读器单独导航、是否被搜索引擎索引为独立资源。
<article></article> 适用于：
- 博客条目、新闻稿、用户评论——自带完整标题、时间、作者，能脱离上下文独立存在
- 网格中的评分卡片（如带
<header><h3>用户体验</h3> <time datetime="2026-06-28"></time></header>的单个评分项）
<section></section> 适用于：
- 同一主题下的子模块，如“功能亮点”“技术参数”“用户反馈”，必须配
<h2></h2>–<h6></h6> - 不能脱离父级
<main></main>存在——删掉外层，它就失去语义意义
反例：<section class="rating-grid"></section> 仅用于 CSS Grid 布局，没标题、无独立语义，该换成 <div>。
<h3>交互组件内部仍需保持语义链完整</h3>
<p>一个带展开/收起的 FAQ 网格项，不能只靠 JS 控制 display，而要确保 DOM 结构本身表达意图。例如，每个问题应是 <code><article></article>，问题标题用 <header></header>，答案用 <div> 或 <code><section></section>（若含多段解释），关键操作按钮要有 aria-expanded 和 aria-controls。
容易忽略的点：
-
<details></details>/<summary></summary>是原生语义化交互组件，比手写<button></button>+<div> 更可靠，且自带键盘焦点与屏幕阅读器支持 <li>网格项内嵌 <code><figure></figure>展示图表时，<figcaption></figcaption>必须是<figure></figure>的直接子元素，否则语义断裂 - 使用
role="grid"的自定义表格（如可排序评分矩阵）时，<main></main>内不可再嵌套另一个role="main"，避免 landmark 冲突
语义不是加完标签就结束的事；它是从 DOM 结构、ARIA 属性、CSS 定位到 JS 行为的一整条链。任一环节断裂，复杂交互就会在屏幕阅读器里变成黑箱，或在 Lighthouse 中持续报错。
