main必须唯一且为body的直接子元素，否则屏幕阅读器跳过；article须能独立分发（如博客、新闻），section仅作逻辑分组；nav仅用于主导航，header/footer可嵌套但需语义准确。
main 必须唯一且直属于 body
如果页面出现多个 main，或它被包在 <div>、<code><section></section> 甚至 <header></header> 里，浏览器就不再把它当主内容区域处理——屏幕阅读器跳过，Lighthouse 的 “Landmark elements” 项直接扣分。
常见错误写法：
<br><div class="container"> <br><main></main><!-- ❌ 失效 --><br> </div><br>
- 必须保证
main是body的**直接子元素**，且全页只出现一次 - 单页应用（SPA）切换路由时，不要销毁再新建
main，应复用原有节点并替换内部 HTML -
main里可以嵌套任意数量的section、article，但不能再被任何 sectioning content（如section、article、nav）包裹
section 和 article 不是互换词，关键看“能否独立分发”
article 表示能脱离当前页面单独存在、可被 RSS 订阅或转发的内容单元，比如一篇博客、一条新闻、一个商品卡片；section 只是逻辑分组，删掉父级就失去上下文意义，比如“用户评论区”“相关推荐”这类区块。
- 用
article：内容自带完整语义（标题+正文+作者+时间），适合被爬虫抓取为独立条目 - 用
section：需要配合h2–h6标题，否则 W3C Validator 会警告“section lacks heading” - 别把导航菜单、页脚版权信息塞进
section——它们有更精准的语义标签：nav和footer
nav 不等于“所有带链接的容器”
很多开发者看到一排链接就随手套 nav，结果导致辅助技术误判页面结构。W3C 明确规定：nav 仅用于**主导航**（site-wide navigation），比如顶部菜单、侧边全局导航、面包屑（breadcrumb）。
- 文章内跳转锚点（如“回到顶部”“查看目录”）不属于
nav，用普通a即可 - 页脚里的友情链接、法律声明链接，应放在
footer内，不额外加nav - 搜索框本身不是导航，
input type="search"放在header或form里更合适
header 和 footer 可以嵌套，但别滥用
header 和 footer 不仅能用于整个页面，也能出现在 article 或 section 内部——这是合法且推荐的。比如每篇博客文章顶部放作者和发布时间，底部放标签和分享按钮。
- 页面级
header通常含 logo、主导航；文章级header只需标题、作者、日期等元信息 - 避免用
header包裹纯装饰性图片或广告横幅——没语义，还干扰辅助技术识别 -
footer里放版权信息没问题，但别把整段联系方式、地图、表单都塞进去；复杂结构建议拆成address+form+iframe
实际写的时候，最容易被忽略的是 main 的位置约束和 article 的独立性判断。这两个点一旦出错，语义化就从“加分项”变成“扣分项”。
