<main>只能出现一次且不能嵌套，因其是HTML5规范强制要求的唯一核心内容区域；<article>用于可独立复用的内容（如博客、新闻），<section>则需带标题且仅为逻辑分组；无语义需求时才用<div>。
能用 <header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> 的地方，就别写 <div class="header"> 或 <code><div id="nav-wrapper"> —— 浏览器和屏幕阅读器只认标签名，不解析 class 名；SEO 爬虫也靠这些原生语义生成内容大纲。
<h3>为什么 <code><main></main> 只能出现一次且不能嵌套
这是 HTML5 规范的硬性约束：<main></main> 必须是 的直接子元素（或至少不被其他 sectioning content 包裹），它代表整个页面唯一的核心内容区域。违反会导致：
- 辅助技术报 “multiple main landmarks” 错误（如 NVDA、JAWS）
- Lighthouse 语义化检测直接扣分
- HTML5 outline algorithm 失效，标题层级错乱
- 搜索引擎可能降权主体内容权重
常见错误写法：<article><main>...</main></article> 或 <div class="layout"><main>...</main></div>。正确结构应为：<header></header> → <main></main> → <footer></footer> 并列于 下。
<section></section> 和 <article></article> 到底怎么选
两者都表示“有主题的区块”，但语义边界很明确：
立即学习“前端免费学习笔记（深入）”；
-
<article></article>：内容可独立存在、可被复用或 syndicated（如 RSS 推送）。典型场景：博客正文、新闻条目、微博卡片、产品详情页 -
<section></section>：只是逻辑分组，脱离上下文就失去意义。必须带<h2></h2>–<h6></h6>标题，否则语义等同于<div> <li>反例：<code><section class="grid-container"></section>没标题 → 应换<div>；<code><article><h3>用户评论</h3>...</article>→ 错，评论不是自包含内容，该用<section></section>或<aside></aside>什么时候还非得用
<div> <p><code><div> 不是语义缺陷，而是语义“空缺”时的合理选择。判断标准很简单：删掉这个容器，内容是否还能被准确理解其角色？ <ul><li>Flex/Grid 布局中纯粹为了对齐或间距加的包裹层：<code><div class="card__body"> <li>Vue/React 组件根节点强制要求单元素，但语义标签会破坏父级结构（如组件本该渲染为 <code><article></article>子内容，却被迫包一层<div>） <li>需要 <code>display: contents或重置默认 margin/padding，而<section></section>等自带隐式样式或 ARIA role 会干扰 - BEM 中仅作样式钩子，无内容含义（如
<div class="button-group">） <p>真正容易被忽略的是：语义化不是堆砌标签，而是让每个标签都承担可验证的内容职责。一个没标题的 <code><section></section>、一个塞满广告的<main></main>、一个包着全文的<article></article>，比通篇<div> 更损害可访问性。</div>
