必须是的直接子元素，否则会破坏可访问性与seo；可嵌套但需匹配父容器语义，且须含标题或上下文标识。
main 必须是 body 的直接子元素，否则 landmark 失效
浏览器和辅助技术靠 <main></main> 的位置识别页面核心内容。它不是“内容区 div”，而是 W3C 定义的 landmark 角色。一旦被任何其他标签包裹（哪怕只是 <div> 或 <code><header></header>），NVDA、JAWS 就无法准确定位，Lighthouse 会报 “multiple main landmarks” 或 “missing main landmark”。
- ✅ 正确写法：
<header></header><nav></nav><main></main><footer></footer> - ❌ 错误写法：
<div class="wrapper"><main></main></div>（<main></main>被<div> 包裹） <li>❌ 错误写法：<code><header><main></main></header>（<main></main>成了<header></header>的子元素） - 动态渲染时注意：SPA 切换路由后，新内容应插入已有
<main></main>内部，而不是销毁旧<main></main>再新建一个 - ⚠️ 注意：
<header></header>不能嵌套另一个<header></header>，也不能作为<footer></footer>的子元素——这违反语义逻辑 - 多层
<header></header>允许存在，但每一层都必须有独立的<h1></h1>–<h6></h6>，且层级需与父容器语义一致（如<section></section>下的<header></header>应用<h2></h2>，而非重复用<h1></h1>）
实际写的时候，最容易忽略的是
header 不是“顶部大盒子”，而是上下文入口
<header></header> 的语义不取决于它在页面上的视觉位置，而取决于它所归属的父级容器。它可以出现在 顶层，也可以嵌套在 @#@#@#@#@#@#@#@#@#@0（导航属于页面级，不该出现在 article header 里）
<main></main> 的位置刚性——它不像 <div> 那样可以随便套，也不像 <code><header></header> 那样灵活可嵌套。一旦把它放进某个 wrapper div 或和其他语义标签混嵌，整个页面的语义骨架就松动了。
