main必须是body的直接子元素，否则语义失效；其不能嵌套在div或section中，否则被屏幕阅读器忽略、SEO无法识别；正确结构为header、main、footer并列作为body子元素。
main 必须是 body 的直接子元素，否则语义失效——这是语义化网格布局中最常被忽略、也最致命的硬性约束。
为什么 main 不能嵌套在 div 或 section 里
浏览器和辅助技术（如 VoiceOver、NVDA）依赖 DOM 层级识别 landmark 区域。main 是 ARIA main role 的原生映射，一旦被包进任何容器（哪怕只是 <div class="wrapper">），它就退化为普通流内容节点，不再被识别为主内容区域。
- Lighthouse 报 “Main landmark not found” 或 “Multiple main landmarks”
- 屏幕阅读器读作 “section” 而非 “main”，跳过主体导航
- SEO 工具无法提取核心内容区块，影响摘要生成与权重分配
正确结构只有一种：header、main、footer 并列作为 body 的直接子元素，中间不插任何 wrapper 容器。
grid-template-areas 和语义标签必须严格一一对应
CSS Grid 的 grid-template-areas 描述的是视觉布局，而 HTML 标签承载的是语义结构。二者错位时，代码可维护性、无障碍支持和搜索引擎理解都会受损。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若 CSS 写了
grid-template-areas: "header header" "sidebar main" "footer footer"，HTML 就必须用header、aside（不是section）、main、footer顺序排列，且不能用section替代aside或main -
main内部可嵌套article、section，但main自身绝不能被section包裹 - 给
main加grid-column或grid-row会覆盖其grid-area命名，调试时极难定位
交互模块中 section 与 article 的边界怎么划
动态加载卡片、可折叠面板、评分矩阵等复杂交互模块，每个单元的语义归属直接影响 RSS 订阅、屏幕阅读器独立导航、搜索引擎是否索引为独立资源。
-
article：必须是能独立存在、可被单独分发的内容，如一篇博客、一条新闻、一个用户评论 -
section：是文档内逻辑分组，必须有明确主题，且通常带h2–h6标题；不能仅用于“视觉分隔”或“加 margin” -
aside：只能放与当前上下文相关但非核心的信息，如作者简介、相关文章推荐；广告需额外加role="complementary"并注明“广告”文本
把三类信息（广告+作者+相关文章）全塞进一个 aside，语义混杂，辅助技术无法区分优先级。
响应式网格中语义标签的继承风险
用 @media 改变 grid-template-areas 时，视觉区域重排可能破坏语义流顺序。比如桌面端 "header main sidebar"，移动端改成 "header" "main" "sidebar"，看似合理，但若 HTML 中 aside 出现在 main 之前，屏幕阅读器仍按源码顺序读取，导致侧边栏内容先于主内容播报。
- 始终确保 HTML 源码顺序符合逻辑阅读流：主内容优先，辅助内容后置
- 用
order调整视觉位置，而非靠grid-template-areas颠倒语义顺序 - 避免对
main使用display: contents——它会剥离语义节点，使 landmark 消失
真正难的不是写对 grid，而是让 grid 的每一格都承载不可替代的语义角色；一旦视觉和语义脱钩，再精致的布局也经不起无障碍审计或 SEO 抓取。
