<main>必须且只能出现一次，且不能嵌套在<article>、<aside>等结构性元素内，因其代表整个页面唯一的核心内容容器，误用会导致逻辑混乱、焦点丢失和SEO权重分散。
语义化标签不是“让页面看起来更规范”的装饰，而是直接决定浏览器、搜索引擎和辅助技术能否正确解析文档结构的关键。 它们把一堆 <div> 堆砌的盒子，变成有明确角色的“房间”：哪个是入口（<header>），哪个是主厅（<main>），哪个是侧边柜（<aside>），哪个是出口（<footer>）。没用对，结构就塌了——不是样式出错，而是逻辑失联。
为什么 <main> 只能出现一次，且不能嵌套在 <article> 或 <section> 里
因为 <main> 表达的是“整个页面唯一的核心内容容器”，它代表用户打开这个 URL 想看的主体。如果嵌套在 <article> 里，等于说“这篇文章是整页的主内容”，而页面可能还有导航、侧栏、页脚——这违背语义。浏览器和屏幕阅读器会据此跳过其他区域直奔 <main>，重复或错位会导致焦点丢失、SEO 权重分散。
- 一个 HTML 文档中，
<main>必须且只能存在一个，且不应是<article>、<aside>、<footer>、<header>、<nav>、<section>的子元素 - 若页面是博客列表页，
<main>包裹整个文章摘要流；若点进单篇，<main>就只包裹那一篇的完整内容 - 误用示例：
<article><main>.../article>—— 这会让 AT（辅助技术）认为该文章 = 整页主内容，忽略页面级导航
<section> 和 <article> 的边界到底在哪
关键看内容是否“可独立分发、可复用、有自己标题”。<article> 是自带 ID 的“出版物单元”：博客正文、新闻稿、论坛回帖、产品卡片；<section> 是文档内的“逻辑分组”，必须依赖上下文才有意义，比如“评论区”“相关推荐”“配置说明章节”。
-
<article>内部可以有<header>、<footer>、<section>，因为它本身是一个完整内容体 -
<section>不该单独出现在 DOM 根层；它需要上层有明确主题，例如<main><section><h2>技术参数</h2>...</section></main> - 常见误用：把每个轮播图项、每个商品格子都套
<article>—— 若它们无独立 URL、无自洽标题、不被 RSS 抓取，就只是视觉区块，用<section>或带 ARIA 的<div>更准确
<nav> 不是所有链接集合，<aside> 也不等于“右边那栏”
<nav> 专指“主要导航机制”，即帮助用户在站点内大范围跳转的链接集（如顶部菜单、侧边栏目导航、页脚站点地图）。页内锚点、分享按钮、面包屑、登录/注册链接都不算。
立即学习“前端免费学习笔记（深入）”；
-
<aside>的核心是“与主内容间接相关”，不是物理位置。它可以放在<main>左侧、右侧，甚至紧跟某段<p>后面——只要它提供的是补充说明、引用来源、术语解释这类非主线信息 - 错误写法：
<aside><a href="#">联系我们</a></aside>—— “联系我们”是功能入口，不是补充材料，应归入<footer>或<nav> - 兼容提示：旧版 IE 不识别这些标签，需用
document.createElement或html5shiv激活，但更重要的是——即使加了 polyfill，语义错配依然会让 AT 读错结构
真正难的不是记住标签名，而是每次写 HTML 时问一句：“这段内容脱离当前页面后，还能被独立理解吗？它的存在是为了帮用户定位，还是为了帮我写 CSS？” 答案决定了该用 <article> 还是 <section>，该塞进 <main> 还是拎到 <aside> —— 结构一旦定型，后续的 SEO、无障碍、维护成本全跟着走。
