必须且只能出现一次，是页面唯一主干道，须为直接子元素；重复或嵌套会破坏屏幕阅读器跳转、触发lighthouse报错并稀释seo权重。
新手写 HTML 语义化标签，最容易踩的坑不是“不会用”，而是“以为用了就对了”——比如把 <section></section> 当成高级 <div> 套进去，结果文档大纲乱套、屏幕阅读器跳错位置、SEO 权重被稀释。
<h3>什么时候该用 <code><article></article> 而不是 <section></section>
关键看内容能否脱离当前页面独立存在、被 RSS 抓取或单独分享。
-
<article></article>：适合博客正文、新闻稿、微博卡片、商品详情页——复制整段 HTML 到新文件里，它自己就能讲清楚一件事 -
<section></section>：适合“安装步骤”“评论区”“相关推荐”这类依附于当前页面逻辑才成立的区块；单独拎出来会让人摸不着头脑 - 常见错误：
<section></section>套导航栏、<article></article>包整个首页——前者没独立性，后者语义过载，浏览器会把它当“一篇内容”而非“一个页面”
<header></header> 和 <nav></nav> 能不能嵌套？怎么嵌才合理？
能嵌，但必须符合层级逻辑：一个 <header></header> 里可以有多个 <nav></nav>（比如网站顶部主导航 + 文章顶部操作栏），但 <nav></nav> 不能包 <header></header>。
- 正确结构：
<header><h1>标题</h1> <nav>菜单</nav></header> - 错误结构：
<nav><header>……</header></nav>—— 导航是功能区域，不是“某个头部的内容” - 注意：
<header></header>不限于页面顶部；每篇<article></article>或<section></section>都可自带<header></header>（含小标题、作者、时间）
为什么 <main></main> 必须且只能出现一次？
因为它是给辅助技术（如屏幕阅读器）和搜索引擎指路的“唯一主干道”。重复或遗漏都会直接破坏可访问性。
- 浏览器控制台执行
document.querySelector('main')应该稳定返回一个元素；如果返回null，读屏用户可能直接跳过全文 - 不要用
<main></main>包侧边栏、广告、页脚链接——这些属于<aside></aside>或<footer></footer> - 兼容旧浏览器时，仅靠 CSS 添加
display: block不够；需配合role="main"属性兜底
裸奔时（CSS 失效）还能看出结构吗？
这是检验语义是否落地的终极测试。打开浏览器开发者工具，禁用所有样式，观察是否仍能清晰分辨：哪是标题、哪是导航、哪是正文、哪是页脚。
- 如果只剩一堆无缩进、无分隔的纯文本，说明语义标签没起作用——可能全用了
<div>，或 <code><h2></h2>全塞在<section></section>外面导致大纲断裂 -
<strong></strong>和<em></em>要比<b></b>和<i></i>优先；前者传达“重要性”和“语气”，后者只是样式残留 - 别依赖类名猜结构：
<div class="footer"></div>在裸奔时就是个普通段落；而<footer></footer>即使没样式，也会被解析为页脚语义
真正难的不是记住标签名，而是每次敲下 <section></section> 前，多问一句：“这个区块，离开当前页面还能讲得清自己是谁吗？”
