main 标签必须且只能有一个，作为页面核心内容的唯一标识，须为 body 直接子元素；section 须有明确主题和标题，不可滥用为样式容器；article 用于可独立分发的内容，如用户评价卡片。
main 标签必须用，且只能有一个
浏览器和辅助技术依赖 main 识别页面核心内容。没它，Lighthouse 会报“缺少主内容区域”；有两个，第二个会被忽略，甚至触发 HTML 验证错误。
常见错误现象：<main></main> 套在导航栏里、被包在 <header></header> 或 <footer></footer> 内部、或者一个页面出现两次。
-
<main></main>必须是的直接子元素（或仅嵌套在<div> 等中性容器里） <li>同一页面中不能有多个 <code><main></main>，哪怕用hidden或 CSS 隐藏也不行 - 如果页面含多个文章卡片，
<main></main>应包裹整个列表，而不是每个卡片都套一个 - 每个
section必须有且仅有一个<h2></h2>–<h6></h6>（可用class="visually-hidden"隐藏视觉样式但保留语义） - 同级
section应逻辑并列，比如「安装步骤」「配置说明」「常见问题」，不是父子关系 - 若内容已适合用
<article></article>（如博客正文）、<nav></nav>（主导航）、<aside></aside>（侧边推荐），就别退化成section -
article可以嵌套section（比如一篇长文内部再分章节） -
section里一般不套article，除非是「相关文章推荐」这类明确的独立内容集合 - 不要为兼容 IE8 强行降级：现代项目应配合 HTML5 Shiv + 重置样式，而非放弃语义标签
-
<nav></nav>内部二级菜单请用<ul></ul>/<ol></ol>，不是再套<nav></nav> -
<header></header>若出现在<article></article>或<section></section>内部，它的标题应服务于该区块，而非整页 - 所有语义标签默认无样式，视觉效果全靠 CSS 控制——别指望
<main></main>自动居中或<footer></footer>自动固定底部
section 不是 div 的语义替代品，用错反而伤可访问性
section 只适用于有明确主题、能独立成文、且必须配 <h2></h2>–<h6></h6> 标题的内容块。把它当“样式盒子”用，等于给屏幕阅读器扔了一堆无标题的空节点。
典型误用：<section></section> 包轮播图控制按钮、包页脚社交媒体图标、整段表单操作区只加一个 <section></section> 却不带标题。
立即学习“前端免费学习笔记（深入）”；
article 和 section 的边界在哪
article 强调“可独立分发”——复制出去能单独发布、被 RSS 抓取、或作为一条微博转发；section 强调“主题区块”，依附于当前文档上下文。
使用场景差异很实际：一个产品介绍页里，每张用户评价卡片用 <article></article>；而整页拆解的「技术原理」「性能对比」「部署流程」则各自用 <section></section>，每个都带 <h2></h2>。
header / footer / nav 不是装饰，嵌套规则不能乱
<header></header> 和 <footer></footer> 可多层出现（页面顶部一个，每个 <article></article> 也能有自己的），但 <nav></nav> 只能用于主导航链接集合，且不能嵌套另一个 <nav></nav>。
容易踩的坑：把面包屑、页脚版权链接、搜索框都塞进 <nav></nav>；或者在 <main></main> 外再套一层 <header></header> 当布局容器。
section 也只是一堆语义噪音。
