html语义规范是可访问性、seo和维护性耦合的工程约束，非风格问题；div套div导致屏幕阅读器焦点流中断，因其无隐含语义且不参与tab顺序，需用等语义标签并正确关联label与控件。
HTML语义规范不是“写得像样就行”的风格问题，而是可访问性、SEO、维护性三者耦合的工程约束——不按规范做，后续所有自动化检查、无障碍测试、搜索引擎抓取都会在关键节点失效。
为什么 div 套 div 会直接卡住屏幕阅读器的焦点流
屏幕阅读器依赖 DOM 的语义层级推进导航，div 默认是 role="generic"，没有隐含语义，也不参与 tab 键顺序（除非手动加 tabindex）。当整个导航栏写成：<div class="nav">
<div>首页</div>
<div>产品</div>
</div>，它对阅读器来说就是一段不可交互、不可命名、不可跳转的纯文本块。
实操建议：
- 用
<nav></nav>包裹主导航，并加上aria-label（如aria-label="主导航"），让阅读器能识别并提供“跳到导航”快捷键 - 内部必须用
<a></a>或带role="link"+tabindex="0"的元素，不能只靠click事件模拟跳转 - 避免给
<div> 直接加 <code>onclick却不处理键盘事件（Enter/Space）——这会让键盘用户彻底卡死<main></main>和<section></section>的嵌套边界在哪<main></main>是页面唯一主内容容器，一个文档里只能有一个；<section></section>是有主题的独立内容区块，但不是所有分组都该用它。常见误用是把每个卡片、每行列表、甚至每个<div> 都套一层 <code><section></section>，结果生成一堆无意义的role="region"，反而干扰阅读器的结构感知。判断依据很实际：
- 这个区块是否有自己的标题（
<h2></h2>–<h6></h6>）？没有就别用<section></section> - 它是否能被单独抽取出来、作为一篇独立文章发布？不能就优先用
<div> 或 <code><article></article>（后者适用于自包含内容，如博客条目） -
<main></main>内部不应再出现<header></header>或<footer></footer>——它们属于页面级结构，应放在<main></main>外 - 显式绑定：
<label for="username">用户名</label><input id="username" name="username" type="text"> - 隐式包裹：
<label>用户名<input name="username" type="text"></label>（注意：input 必须在 label 内，且不能用display: block拆开结构） - 禁用
aria-label替代 visible label——它绕过视觉标签，违反 WCAG 2.1 的 3.3.2 条款（标签或说明）
表单控件的
label关联为何总被漏掉或写错没正确关联
<label></label>和控件，会导致屏幕阅读器读不出输入项用途，也会让点击 label 无法聚焦控件（影响触屏/小屏操作）。最典型错误是只写<label>用户名</label><input type="text">，没用for或id绑定。安全写法只有两种：
真正难的不是知道该用什么标签，而是每次写 HTML 时都要同步考虑三件事：浏览器怎么解析、阅读器怎么朗读、搜索引擎怎么索引。一旦其中一环断开，所谓“闭环”就只是纸面流程。
- 这个区块是否有自己的标题（
