HTML5语义化布局是SPA结构逻辑的显性表达：main须唯一稳定并包裹全部核心视图，动态更新其内部；nav、header按作用域分层使用；section/article/aside依内容独立性选用；动态状态需aria属性与语义标签协同支撑。
HTML5语义化布局在单页应用（SPA）中不是装饰，而是结构逻辑的显性表达——它把“内容该在哪、为什么在这、和谁有关”这些隐含关系，用标签直接写进DOM里。
main 是 SPA 的内容锚点，不是容器套娃
SPA靠JS动态切换视图，但语义结构不能跟着一起“重绘”。main 必须唯一、稳定、包裹全部核心视图区域，比如路由渲染出的文章列表、详情页或表单页都应在 main 内部完成更新。
- 每次路由跳转后，新内容应替换 main 内部，而不是销毁重建整个 main 标签
- 全局加载遮罩、错误提示弹窗、Toast通知等非内容功能，不应塞进 main，更适合用 div + aria-live="polite" 独立管理
- 避免把导航栏、页脚或侧边菜单嵌套在 main 里——它们与 main 是同级并列关系
nav 和 header 要按作用域分层使用
SPA常有多层导航：全站主导航、页面内目录、卡片操作栏……语义标签要按“影响范围”精准匹配，不能一概套用。
- 顶部Logo+主导航 → 外层 header + nav，代表整站入口
- 某篇文章右侧的章节跳转目录 → 放在该 article 内部的 nav，加 aria-label="本文目录" 明确作用
- 一个产品卡片上方的标题+发布时间 → 卡片内部用 header，不需额外 div 包裹
- 页脚里的“隐私政策”“关于我们”不属于主要导航链路，不用 nav，普通链接即可
section、article、aside 的边界由内容独立性决定
不是按位置，而是按内容能否脱离上下文仍保持完整意义来选标签。
立即学习“前端免费学习笔记（深入）”；
- article：博客正文、新闻稿、论坛回帖——能单独被RSS订阅、搜索引擎索引、转发分享
- section：首页的“热门推荐”“用户评价”区块——有统一主题，但内部条目不具备独立传播价值
- aside：文章页右侧的“相关阅读”“作者简介”，或仪表盘旁的“快捷操作说明”——与当前 main 或某个 article 相关，但非主线信息
- 不要为每个小模块硬套 section；如果只有单个标题没其他内容，直接用 h2 更合理
动态状态也要语义支撑
加载中、无数据、请求失败——这些不是视觉状态，而是内容生命周期的一部分，需要语义化表达。
- 空态提示（如“暂无内容”）应放在对应 section 或 article 内部，而非全局浮层
- 加载状态可用 aria-busy="true" 配合 role="status"，让读屏软件感知操作进行中
- 错误提示建议包裹在 section 中，并用 aria-labelledby 关联错误标题，增强可访问性
- 所有动态插入的内容块，都要检查是否落入正确的语义层级——比如新加载的一篇文章，必须用 article 包裹，不能只是 div + class
