只能出现一次且不能嵌套在或里，因为它是页面级唯一主体容器，代表整页不可替代的核心内容；嵌套会破坏语义逻辑，导致辅助技术误判和seo降权。
HTML文档结构不是套模板，而是做决策——每个标签都在回答“这个内容在整页中扮演什么角色”。
为什么 <main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 里？
因为 <main></main> 表示页面中**唯一、不可替代的主体内容区域**，浏览器和辅助技术（如屏幕阅读器）靠它快速定位核心信息。一旦嵌套，语义就冲突了：<article></article> 本身就是一个可独立分发的内容单元，它内部的主内容应由自身结构定义，再套一层 <main></main> 相当于说“这个小文章里还有整个页面的主内容”，逻辑矛盾。
- 错误写法：
<article><main><p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></main></article> - 正确写法：
<main><article><p>正文</p></article></main>（<main></main>包裹整个文章区块） - 检查方法：打开 Chrome DevTools → Elements 面板 → 右键
<main></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></nav> 不是“放链接的 div”，它的行为和嵌套有硬性限制
<nav></nav> 被识别为导航地标（landmark），会被屏幕阅读器列为快捷跳转目标。但它只适用于**站点级或大区块级导航**，比如顶部菜单、侧边栏目录、页脚链接组；面包屑、文章内跳转锚点、分页按钮都不该用它。
- 合法嵌套：
<nav><ul><li><a>首页</a></li></ul></nav>
- 非法嵌套：
<nav><div class="pagination"><a>上一页</a></div></nav>（分页不是导航地标） - 常见误用：
<div id="nav"> → 应直接换为 <code><nav></nav>，并确保里面至少包含两个及以上有意义的跳转链接 - 验证方式：按
Ctrl+Shift+U（Windows）或Cmd+Option+U（Mac）打开无障碍树，看<nav></nav>是否出现在“Landmarks”列表中
真正卡住人的从来不是标签记不住，而是面对一个新页面时，没法快速判断“这里该用 <section></section> 还是 <div>”——这取决于你是否先想清楚：这段内容有没有独立标题？能不能被单独 syndicated？要不要出现在大纲视图里？</div>
