是页面唯一主内容容器，不可嵌套且只能用一次； 是可嵌套的主题分组，需有标题才推荐使用； 用于可独立分发的内容单元，三者语义与用途互不替代。
用 <main></main> 还是 <section></section> 区分主要内容？
<main></main> 是页面唯一、不可嵌套的“主内容容器”，浏览器和屏幕阅读器会直接跳转到它；<section></section> 是通用主题分组，可多次出现、可嵌套，但不自带“核心内容”语义。搜索引擎看到 <main></main> 会加权识别为正文主体，而多个 <section></section> 只会被当作逻辑区块。
常见错误现象：<main></main> 出现在 <article></article> 内部，或一个页面写了两个 <main></main> —— 这违反 W3C 规范，部分辅助设备会忽略第二个。
- 只在整页中使用一次
<main></main>，且不能是<article></article>、<aside></aside>、<nav></nav>、<header></header>、<footer></footer>的子元素 -
<section></section>必须有标题（<h1></h1>–<h6></h6>）才建议使用，否则用<div> 更合适 <li>博客列表页：整个列表区域用 <code><main></main>，每篇文章用<article></article>，分类筛选栏用<aside></aside> - 新闻正文旁的背景资料卡片 → 合理
<aside></aside> - 全站通用的左侧导航菜单 → 应该用
<nav></nav>，不是<aside></aside> - 页脚里的联系方式 → 属于页面级元信息，用
<footer></footer>，不是<aside></aside> - 一个产品介绍页：整体用
<main></main>，每个功能模块用<section></section>，其中的用户评价摘录用<article></article> - 不要把整篇教程塞进一个
<article></article>，而应按章节拆成多个<section></section>，再用<h2></h2>标题锚定 -
<article></article>内可嵌<section></section>，但<section></section>内不应包裹多个语义上不相关的<article></article>
<aside></aside> 不等于“侧边栏 CSS 样式”
<aside></aside> 表示与当前上下文“间接相关”的内容，比如博客文章旁的作者简介、术语解释框、相关链接推荐；它不是布局标签，跟是否出现在视觉右侧完全无关。滥用 <aside></aside> 填充广告位或导航菜单，反而会误导屏幕阅读器用户跳过关键信息。
使用场景判断标准：把这块内容删掉，主文章是否依然完整、自洽？如果是，才适合 <aside></aside>。
<article></article> 和 <section></section> 的嵌套边界在哪？
<article></article> 是可独立分发、重用的内容单元（如一篇博文、一条微博、一份产品说明书），自带隐含的 <header></header> 和 <footer></footer> 语义；<section></section> 是文档内按主题划分的节，依赖上下文存在。
性能与兼容性影响：现代浏览器对两者解析无差异，但旧版 IE（≤9）需通过 document.createElement() 注册才能识别样式。更重要的是，错误嵌套会削弱 SEO 效果——Google 明确表示，将非独立内容包进 <article></article> 会降低该内容的权威性评分。
为什么 <main></main> 不能替代 <article></article> 或 <section></section>？
<main></main> 只回答“哪一块是本页最核心的用户目标内容”，不回答“这块内容是否可独立存在”或“这块内容是否构成一个主题单元”。三者职责完全不同：<main></main> 是页面级定位，<article></article> 是内容粒度封装，<section></section> 是结构层级切分。
容易被忽略的一点：当页面存在多个语义化区域时，<main></main> 的缺失或错位，会让屏幕阅读器用户无法快速定位正文起点——他们不会靠滚动或猜 class 名来寻找内容，而是依赖 <main></main> 的 ARIA 隐式角色 main 直接跳转。
