移动端必须使用语义化标签组合：用于顶部区域且不嵌套，仅包裹主导航链接，唯一且不被包裹，限独立可分发内容，与需严格遵循上下文规则，嵌套深度不超过4层。
<header></header>、<nav></nav>、<main></main>这些标签在移动端不是“可选装饰”，而是结构刚需。用对了，屏幕阅读器能跳过广告直达正文；用错了，iOS VoiceOver可能把<section></section>当普通容器读成“一段内容”，失去导航意义。
移动端必须用的语义化标签组合
别再靠<div class="header">撑场面。移动端小屏下信息密度高，辅助技术依赖语义快速定位：
<ul>
<li>
<code><header></header>只用于页面或<article></article>区块的顶部区域（含<h1></h1>、logo、搜索框），不能嵌套另一个<header></header>
<nav></nav>只包裹**主导航链接群**，比如底部Tab栏或顶部菜单；侧边抽屉里的链接如果非主路径，用<aside></aside>更合适<main></main>必须且仅出现一次，且不能被<article></article>或<section></section>包裹——它是整个页面的“内容锚点”，iOS Safari 的“跳转到主要内容”功能就靠它识别<article></article>适用于新闻卡片、商品列表项这类**可独立分发、带发布时间/作者的完整内容单元**；单纯一个用户头像+昵称模块，用<section></section>即可移动端特有的语义陷阱
某些标签在桌面端宽松，在移动端会直接触发可访问性报错：
-
<footer></footer>放在<article></article>内部时，必须包含该文章的元信息（如发布时间、阅读量），否则会被 VoiceOver 误读为“页脚结束”，打断阅读流 -
<aside></aside>不能作为<main></main>的兄弟节点堆在页面底部——移动端屏幕窄，它实际是“视觉侧边”，逻辑上应紧贴关联的<article></article>或<section></section> - 用
<section></section>分组时，必须配<h2></h2>~<h6></h6>标题（哪怕display: none），否则 TalkBack 会跳过整块内容 -
<figure></figure>和<figcaption></figcaption>必须成对出现，且<figcaption></figcaption>要放在<figure></figure>内部第一或最后——否则 Android Chrome 会把图片描述读成“无标题图像”
配合 viewport 和 CSS 的最小必要操作
语义标签本身不解决适配，但错误的组合会让响应式失效：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则<nav></nav>里的 flex 布局在 iOS 上可能被强制缩放 - 给
<main></main>加role="main"是冗余的——现代浏览器已原生支持，反而可能干扰旧版 Android WebView -
<header></header>和<footer></footer>默认是块级，但移动端常需固定定位；此时必须手动设position: sticky并指定top: 0或bottom: 0，否则语义结构会被渲染引擎降级处理 - 避免给
<article></article>设max-width后居中——它本应占满可用宽度；用<section></section>套一层容器来控制宽度更安全
最易被忽略的是：语义标签的嵌套深度。移动端 DOM 节点超过 4 层（比如<main><section><article><header><h2></h2></header></article></section></main>）时，部分低端 Android 设备的辅助服务会丢弃中间层级的语义信息。宁可多用<section></section>平铺，也不要深套。
