HTML5语义化标签是SPA结构稳定与可维护的基础;main须唯一包裹核心视图,nav/header需区分全局与局部,article/section/aside边界须清晰,动态内容(加载/错误/空态)也需语义支撑。

HTML5语义化标签在单页应用(SPA)中不是可选项,而是结构稳定性和长期可维护性的基础。SPA靠JavaScript动态更新DOM,若底层HTML缺乏明确语义,就会放大可访问性、SEO和调试问题。
main 标签是SPA内容区的“锚点”
- 在路由切换时,确保每次渲染新视图都保留在
内部,而不是把 反复销毁重建 - 避免在
外放置功能性内容(如全局弹窗、加载遮罩),它们更适合用 - 配合aria-live="polite"可提升路由切换后的无障碍播报体验
nav 和 header 需区分“全局”与“局部”
SPA常含多层导航:顶部主导航、侧边菜单、文章内目录等。语义化要求按作用范围精准使用标签。
- 顶部Logo+主导航用
+ - 文章页右侧目录属于内容附属结构,应放在
内部的 - 面包屑导航建议用


















