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