单页应用中仅作宿主而非内容容器，所有动态内容须注入稳定骨架（如main#main-content）；语义标签如不可缺失，需按规范使用，和viewport meta为硬性起点。
单页应用中
单页应用（SPA）的 HTML 文档结构表面看和普通页面一样，但实际语义和使用逻辑已根本改变： 只负责挂载入口点，所有可变内容都由 JavaScript 动态注入到某个容器节点里，比如 div#app 或 main#main-content。浏览器首次加载后， 再也不会被整页替换——它成了“宿主”，不是“内容区”。
常见错误现象：
- 在
里直接写多组<header><main><footer></footer></main></header>，以为能靠 CSS 切换显示，结果语义混乱、SEO 无法识别主次 - 把路由视图内容直接塞进
内联，导致 DOM 节点反复销毁重建，辅助技术（如屏幕阅读器）状态丢失
正确做法是保留一个稳定骨架：
<header><h1>My App</h1></header><nav><ul><li><a href="#/home">首页</a></li></ul></nav><main id="main-content"></main><footer><p>© 2026</p></footer>
所有视图更新只发生在 main#main-content 内部，<header></header>、<nav></nav>、<footer></footer> 保持静态且语义明确。
<section></section> 和 <article></article> 在 SPA 中容易误用
HTML5 语义标签在 SPA 里不是“可选装饰”，而是关键的可访问性与 SEO 锚点。但很多开发者把 <section></section> 当成 <div> 的替代品，仅因“看起来更现代”就滥用。
<p>使用场景差异：</p>
<ul><li>
<code><section></section> 必须有主题性，应配 <h2></h2>–<h6></h6> 标题；若只是布局分块（如左右两栏），用 <div> 更准确
<li>
<code><article></article> 表示独立可复用、可分发的内容单元（如一篇博客、一条新闻），不能用于“用户个人资料卡片”这类上下文强依赖的 UI 块
<main></main> 内第一个标题是 <h1></h1>，否则屏幕阅读器无法定位当前页面主标题性能影响：过度嵌套 <section></section> 不影响渲染速度，但会显著增加无障碍树（Accessibility Tree）复杂度，拖慢 AT 工具遍历效率。
<noscript></noscript> 和 <meta name="viewport"> 仍是硬性起点
哪怕整个应用由 React/Vue 驱动，<noscript></noscript> 块和视口配置仍必须存在——它们不服务于 JS 运行时，而服务于初始加载阶段的浏览器行为与设备适配。
容易踩的坑：
- 删掉
<noscript></noscript>，认为“我的用户都有 JS”，但搜索引擎爬虫、部分邮件客户端、企业内网代理仍可能禁用 JS，导致空页面被抓取 -
<meta name="viewport">缺失或写成content="width=320"这类固定值，会让 iOS Safari 强制缩放，触发不可预测的滚动/焦点 bug - 在动态渲染的视图里重复插入
<meta>标签（如通过 JS 修改document.head），多数浏览器忽略后续插入，只认初始 HTML 中的声明
正确写法始终放在 固定位置：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><noscript><strong>请启用 JavaScript 以使用本应用</strong></noscript>
HTML5 语义结构在 SPA 中的边界在哪
语义化不是越细越好。像 <time></time>、<mark></mark>、<details></details> 这类标签，在 SPA 场景下需谨慎评估真实收益。
例如：
-
<time datetime="2026-06-23">今天</time>对 SEO 无实质提升，但若时间需被日历类工具解析，则值得保留 -
<mark></mark>适合高亮搜索关键词等临时视觉强调，不适合用于“已读状态”这类业务逻辑——该用 class 控制样式，而非语义标签 -
<details></details>在 JS 控制展开收起时，其原生交互（点击 summary 触发 toggle）会与框架事件冲突，建议仅在纯静态文档片段中使用
真正不可妥协的是骨架级语义：<header></header>、<nav></nav>、<main></main>、<footer></footer>、<aside></aside> —— 它们构成浏览器和辅助工具理解“页面是什么”的唯一依据，一旦缺失或错位，SPA 就退化为黑盒。
