优先用 表示有标题的独立内容区块， 仅用于无语义的布局； 标识唯一主内容区， 代表可独立分发的内容单元；自定义元素需手动设置样式与 aria 属性。
用 <div> 还是 <code><section></section>？语义和用途差异在哪
选错容器元素，后期维护、SEO、屏幕阅读器支持都会出问题。不是所有“装内容的盒子”都该用 <div>。
<p><code><div> 是纯样式/布局容器，没有语义；<code><section></section> 表示有标题的独立内容区块（比如“产品特性”“用户评价”），浏览器和辅助工具能识别其结构意义。
- 如果只是为加边框、设宽度、配合 CSS Grid/Flex 布局——用
<div> <li>如果这块内容在逻辑上可被单独引用、有明确主题、文档大纲里应出现——优先用 <code><section></section>，且最好带<h2></h2>或更高级别标题 -
<article></article>、<aside></aside>、<nav></nav>同理：先想“它在页面里扮演什么角色”，再选标签 - 检查是否真需要每一层：删掉某层
<div> 后样式是否崩？如果没崩，就删 <li>用 CSS 的 <code>contain: layout style替代部分包裹需求，限制样式/布局影响范围 - Vue/React 中避免无意义的
<div> 包裹组件，改用 <code><template></template>或 Fragment（>）<main></main>和<article></article>能互相替代吗？不能。它们在 ARIA 角色和文档大纲中作用完全不同：
<main></main>标识页面唯一主内容区（整个页面只能有一个），而<article></article>可多次出现，代表可独立分发、复用的内容单元（如博客文章、新闻条目、评论）。错误用法示例：
<main><article><h1>关于我们</h1> <p>…</p></article></main>—— “关于我们”不是独立可分发的内容，不该用<article></article>。- 主内容区用
<main></main>，内部按内容类型细分：列表用<section></section>，单篇博文用<article></article>，侧边栏用<aside></aside> - 若页面是聚合页（如首页展示多篇文章），每篇用
<article></article>，整体仍包在<main></main>内 - 不给
<main></main>加role="main"：现代浏览器已内置该 role，重复声明反而可能干扰旧读屏软件
用自定义元素（
<my-card></my-card>）当容器？要注意什么自定义元素可以做容器，但默认是
display: inline，且不自带任何语义或可访问性信息，直接替换<div> 很容易踩坑。 <p>比如 <code><my-card><h3>标题</h3> <p>内容</p></my-card>在屏幕阅读器里会被读作“my card”，而非“卡片：标题”。- 必须手动设置
display: block或display: flex等布局行为 - 通过
role属性补充语义（如<my-card role="region" aria-labelledby="card-title"></my-card>） - 避免在 SSR 或静态 HTML 场景下使用：未注册的自定义元素会被当作未知标签，部分老浏览器可能忽略其子节点渲染
真正难的不是“怎么放一个容器”，而是判断这个容器在 DOM 结构、CSS 渲染、JS 操作、无障碍支持四个维度上是否承担了它该承担的角色。多一层思考，后面少十次调试。
- 主内容区用
嵌套 <div> 太深导致样式难控？常见诱因和解法
<p>三层以上 <code><div> 嵌套很常见，但会放大 CSS 选择器复杂度、增加 JS 查询开销、拖慢 DevTools 定位效率。
<p>典型诱因是过度依赖容器包裹来实现样式隔离，或框架生成冗余 wrapper（比如某些 UI 库的 <code>class="wrapper-inner__container"）。
立即学习“前端免费学习笔记（深入）”；
