main 必须唯一且直接子元素于 body，不得嵌套在 header 或 footer 中；article 用于可独立分发的内容，section 用于有主题但非自包含的区块；aside 表示依附于邻近内容的补充信息，非全局侧边栏。
main 必须唯一，article 不等于 section，aside 不是“随便放点东西的地方”——语义化不是给 div 换个名字，而是让每个标签承担明确的结构职责。
为什么 main 不能嵌套在 header 或 footer 里
main 的语义是“文档中与当前页面主题直接相关、独一无二的主要内容”，它代表的是整个页面的主体焦点。一旦把它放进 header 或 footer，就等于说“页眉里藏着页面主要内容”，逻辑上矛盾，也会导致屏幕阅读器跳过或误判核心内容区域。
常见错误现象：
– 页面用 NVDA 或 VoiceOver 测试时，“跳至主要内容”快捷键失效
– Lighthouse 可访问性审计报错 Document does not have a main landmark
正确做法：
– main 应直接子元素于 body
– 它内部可包含 article、section、figure 等，但不可被其他结构性语义标签包裹
– 若需局部“主内容”（如某篇文章内的正文区），应使用 article，而非嵌套 main
article 和 section 到底怎么选
区分关键不在“看起来像不像一个模块”，而在于“能不能独立存在、独立分发”。
用 article 的场景：
– 博客文章、新闻条目、论坛帖子、产品卡片（含标题、摘要、发布时间）
– 这些内容即使脱离当前页面，单独 RSS 推送、打印成 PDF 或被搜索引擎抓取为独立结果页，依然语义完整
用 section 的场景：
– “关于我们”“服务流程”“客户评价”这类有统一主题但不具备自包含性的区块
– 每个 section 必须带 h2–h6 标题，否则建议改用 div
– 它可以包含多个 article，但反过来不行（article 内部不应包裹 section 来组织段落，那是 div 或纯段落 p 的事）
aside 不是侧边栏的同义词
aside 表示“与当前内容相关但可独立于其存在的补充信息”，它的语义绑定对象是紧邻的父级内容块，而不是整页布局。
容易踩的坑：
– 把全站广告、全局联系方式、导航菜单塞进 aside → 错，这些属于页面级结构，该用 header/nav/footer
– 在 main 顶层放一个 aside 当“右侧边栏” → 错，这违背了它依附于某个具体内容的语义前提
– 正确用法示例：
• 一篇技术文章内，用 aside 包裹一段“兼容性说明”或“历史背景”
• 一个 article 下方，用 aside 放作者简介（仅针对该文）
• figure 旁用 aside 提供延伸解读（非 figcaption 范畴）
浏览器兼容性和 ARIA 隐式角色别忽略
现代浏览器对 header、nav、main 等标签已内置 ARIA landmark 角色（如 banner、navigation、main），但 IE11 及更旧版本不识别，且部分辅助技术对嵌套层级敏感。
实操建议：
– 不必引入 html5shiv 来“修复”语义，它只补 DOM 解析，不补可访问性语义
– 若需兼容旧环境，可手动加 role 属性（如 <main role="main"></main>），但优先确保结构本身正确
– 避免冗余：不要写 <nav role="navigation"></nav>，role 已隐式存在
– 检查工具：用 axe DevTools 扫描，重点关注 “Landmark is not unique” 或 “No main landmark found” 类提示
最常被忽略的点：语义标签之间没有视觉强制约束，article 套 section 再套 aside 在语法上合法，但若破坏了内容的实际从属关系，就等于用正确的单词写错了句子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
