只能出现一次且必须为直接子元素，因其是w3c强制定义的唯一语义锚点，用于屏幕阅读器“m键跳转”和搜索引擎主题提取；嵌套或重复会破坏可访问性、触发lighthouse报错并干扰seo。
语义化标签不是“加了就完事”，关键在层级逻辑和浏览器默认行为是否被意外破坏。
用 <header></header> 和 <footer></footer> 时别嵌套错上下文
常见错误是把 <header></header> 当成“页面顶部装饰区”乱放——它必须是某个 <section></section>、<article></article> 或整个 的直接子元素。比如在 <nav></nav> 内部再套一个 <header></header>，语义就失效了；浏览器不会报错，但屏幕阅读器可能跳过或误读。
-
<header></header>应该包裹标题（<h1></h1>–<h6></h6>）、logo、主导航入口，但不包含搜索框主体（搜索框建议用<form></form>包裹） -
<footer></footer>不等于页脚版权栏——它可以出现在<article></article>内部（比如作者信息），此时它只属于那篇文章，不影响页面级 footer - 多个
<header></header>是合法的，但每个都必须有明确归属，不能孤立存在
<main></main> 只能出现一次且不能是 <article></article> 或 <aside></aside> 的子元素
这是最常被忽略的硬性限制：<main></main> 必须是 的直接子元素，且全页面唯一。把它塞进 <div class="wrapper"> 里看似无害，实则破坏 ARIA 角色映射，部分辅助技术会完全忽略内容。
<ul><li>如果用了 CSS Grid/Flex 布局需要居中容器，用 <code><div> 包裹 <code><main></main> 外层，而不是把 <main></main> 当容器用
<main></main> 内部可以有多个 <article></article>、<section></section>，但禁止嵌套 <aside></aside>（侧边栏应与 <main></main> 并列）<main></main> 的 aria-live 属性，否则屏幕阅读器不会播报新内容
<nav></nav> 的判定标准不是“有没有链接”，而是“是否提供主要导航路径”
很多开发者看到一排链接就套 <nav></nav>，结果页面出现 4 个 <nav></nav>，反而稀释了主导航权重。浏览器和读屏软件只对首个 <nav></nav> 做特殊处理（如快捷键跳转）。
- 主导航（如顶部菜单、侧边栏全局菜单）必须用
<nav></nav>；面包屑、页内锚点链接、页脚链接组建议用<div role="navigation"> 显式声明，避免语义过载 <li> <code><nav></nav>内部必须有至少一个可聚焦元素（如<a></a>或带tabindex="0"的<button></button>），空<nav></nav>会被某些读屏器跳过 - 响应式折叠菜单的
<nav></nav>，需配合aria-expanded和aria-controls控制状态，否则键盘用户无法感知展开/收起
真正难的不是记住哪些标签可用，而是每次写 <section></section> 前得问自己：这个区块是否有独立主题？能否被 RSS 抓取？去掉它是否影响其他区块理解？这些判断没有自动工具能替代。
