<main>只能出现一次且不能嵌套在<article>或<section>里，因为它是页面级唯一主体容器，代表整页不可替代的核心内容；嵌套会破坏语义逻辑，导致辅助技术误判和SEO降权。
HTML文档结构不是套模板，而是做决策——每个标签都在回答“这个内容在整页中扮演什么角色”。
为什么 <main> 只能出现一次，且不能嵌套在 <article> 或 <section> 里？
因为 <main> 表示页面中**唯一、不可替代的主体内容区域**，浏览器和辅助技术（如屏幕阅读器）靠它快速定位核心信息。一旦嵌套，语义就冲突了：<article> 本身就是一个可独立分发的内容单元，它内部的主内容应由自身结构定义，再套一层 <main> 相当于说“这个小文章里还有整个页面的主内容”，逻辑矛盾。
- 错误写法：
<article><main><p>正文</p></main></article> - 正确写法：
<main><article><p>正文</p></article></main>（<main>包裹整个文章区块） - 检查方法：打开 Chrome DevTools → Elements 面板 → 右键
<main>→ “Inspect ARIA attributes”，看是否被标记为role="main"且无重复
<img> 的 alt 属性到底怎么填？空字符串 alt="" 和不写 alt 完全不同
漏掉 alt 不是“省事”，是让屏幕阅读器把文件名或路径直接念出来（比如 IMG_20230512_1423.jpg），对视障用户毫无意义；而 alt="" 是明确告诉辅助技术：“这张图纯装饰，跳过它”。
- 需要描述内容的图：
<img src="chart.png" alt="2023年Q1销售额柱状图，最高值为¥86万"> - 纯装饰性图（如分隔线、背景花边）：
<img src="deco-line.svg" alt=""> - 绝对不要：
<img src="logo.png">（没alt）或<img src="logo.png" alt="logo">（用泛词，丧失语义） - Lighthouse 报“Image missing alternative text”时，优先补
alt，而不是加aria-label—— 后者是绕过结构缺陷，不是修复它
<nav> 不是“放链接的 div”，它的行为和嵌套有硬性限制
<nav> 被识别为导航地标（landmark），会被屏幕阅读器列为快捷跳转目标。但它只适用于**站点级或大区块级导航**，比如顶部菜单、侧边栏目录、页脚链接组；面包屑、文章内跳转锚点、分页按钮都不该用它。
立即学习“前端免费学习笔记（深入）”；
- 合法嵌套：
<nav><ul><li><a>首页</a></li></ul></nav></li> <li>非法嵌套：<code><nav><div class="pagination"><a>上一页</a></div></nav>
（分页不是导航地标） - 常见误用：
<div id="nav">→ 应直接换为<nav>，并确保里面至少包含两个及以上有意义的跳转链接 - 验证方式：按
Ctrl+Shift+U（Windows）或Cmd+Option+U（Mac）打开无障碍树，看<nav>是否出现在“Landmarks”列表中
真正卡住人的从来不是标签记不住，而是面对一个新页面时，没法快速判断“这里该用 <section> 还是 <div>”——这取决于你是否先想清楚：这段内容有没有独立标题？能不能被单独 syndicated？要不要出现在大纲视图里？
