<main>必须且只能出现一次，因其是页面唯一主内容语义锚点，供屏幕阅读器快捷跳转和搜索引擎识别核心主题；重复或嵌套会导致辅助技术误读、SEO降权，SPA中须动态替换内容而非新增实例。
HTML语义化标签不是“写得更漂亮”的装饰，而是告诉浏览器、爬虫和屏幕阅读器“这段内容到底是什么”。用错或不用，会直接导致SEO权重稀释、无障碍访问失败、甚至JS逻辑误判DOM结构。
为什么 <main> 必须且只能出现一次
浏览器和辅助技术（如NVDA、VoiceOver）把 <main> 当作页面唯一主内容锚点。若多次出现，屏幕阅读器可能跳过后续所有 <main>，或只朗读第一个；Google 也会降低该页核心内容识别置信度。
- 错误写法：
<main>首页内容</main> <main>文章详情</main>（SPA中常见，但违反规范） - 正确做法：SPA应在路由切换时动态替换
<main>内容，而非新增；多区块场景改用<section>或<article> - 注意：若页面含多个独立文章（如博客列表），每个
<article>可自带<header>和<footer>，但整个页面仍只允许一个<main>包裹它们
<section> 和 <article> 的本质区别在哪
二者都表示“独立内容”，但判断依据不是视觉分隔，而是内容能否被单独引用、复用或订阅。
-
<article>：可脱离上下文存在——比如一篇新闻、一条微博、一个评论。RSS 订阅器能单独抓取它；搜索引擎会为它生成独立摘要 -
<section>：是文档内部的逻辑分组，依赖上下文才有意义——比如“产品特性”“用户评价”“技术参数”这些区块，拆出来就不知所云 - 常见误用：
<section>套<h1>（应只在顶层文档或<article>中用<h1>）；<article>里嵌套多个<h1>（每个<article>最多一个<h1>）
<nav> 不等于“所有链接集合”，而要满足导航意图
<nav> 的语义是“主要导航路径”，不是所有 <a> 都该塞进去。脚注链接、版权声明里的“隐私政策”、文章末尾的“相关推荐”，都不属于 <nav> 范畴。
立即学习“前端免费学习笔记（深入）”；
- 符合场景：顶部主导航栏、侧边栏目分类、面包屑（
<nav aria-label="Breadcrumb">） - 不符合场景：
<p>点击 <a href="/terms">服务条款</a> 查看细则</p>（应保持在段落内） - 性能提示：部分旧版屏幕阅读器对
<nav>有快捷跳转键（如 NVDA + N），滥用会导致用户频繁误跳
<aside> 的边界常被高估
<aside> 表示“与主内容相关但可独立存在”的旁支信息，不是“右边那栏”。广告、作者简介、术语解释、延伸阅读都算；但“热门标签云”“最新评论列表”若与当前文章强耦合，则更倾向用 <section>。
- 关键判断：把它整个删掉，主内容是否依然完整、自洽？如果是，才适合
<aside> - 兼容性注意：IE8 及更早版本不识别
<aside>，需配合 HTML5 Shiv，但更重要的是——别为了兼容性放弃语义，而应通过 CSS 保证视觉降级可用 - 易错点：
<aside>不能作为<main>的直接子元素以外的容器（W3C 明确建议其应靠近关联内容，而非全局悬浮）
真正难的不是记住每个标签怎么写，而是每次写 <div> 前问一句：这个区块如果去掉所有样式，机器还能不能准确说出它“是干什么的”。
