article 是最贴切的卡片容器，代表独立内容单元；section 适合组织同类卡片组；避免冗余嵌套，用语义标签明确内容角色，CSS 更简洁可控。
卡片布局不用 div 套 div 就能做
HTML 本身没有 card 标签，但用语义化标签组合就能自然表达卡片结构。关键不是“怎么画框”，而是“怎么让内容在逻辑上自成一块”。article 是最贴切的容器——它代表独立、可分发的内容单元，比如一条新闻、一个商品、一篇笔记，天然适配卡片场景。section 则适合组织页面中功能相近的一组卡片（如“推荐商品”区域），但它本身不表示单个卡片。
常见错误是把所有卡片都塞进一个 section，再用一堆 div 模拟卡片：这样结构松散，无障碍阅读器无法识别每个卡片的边界，CSS 也容易失控。
-
article用于每张卡片（必须） -
section用于包裹一组同类卡片（可选，但推荐） - 避免嵌套
section > article > section这类冗余结构 - 如果卡片纯属视觉分组、无语义差异（比如网格背景装饰块），才考虑用
div
article 里该放什么标签才不算乱套
卡片不是容器垃圾桶。标题、摘要、操作区这些角色要各归其位，否则 CSS 很难统一控制，响应式也会出问题。核心原则：用语义标签表达内容意图，而不是为了对齐去硬加 div。
- 标题必须用
h2–h6（按页面层级选，别全用h3） - 正文用
p，列表用ul或ol，别用div模拟段落 - 操作按钮放在
footer里（article内的footer表示卡片级操作区，不是页面底部） - 图片用
figure+img+figcaption（如果需要说明）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<article>
<header>
<h3>天气预报</h3>
</header>
<p>今日晴，最高温 28°C</p>
<footer>
<button>刷新</button>
</footer>
</article>
CSS 卡片样式和语义标签冲突吗
完全不冲突，反而更稳。用 article 当卡片容器后，CSS 可以直接写 article { border: 1px solid #eee; border-radius: 8px; } ，所有卡片自动生效。比用一堆 class="card" 更省事，也避免命名污染（比如 card--featured card--compact）。
容易踩的坑：
- 给
article设固定宽高 → 阻碍响应式，改用max-width+flex/grid容器控制布局 - 用
float排卡片 → 已淘汰，改用display: grid或display: flex - 忽略焦点管理：卡片内有按钮或链接时，确保键盘 Tab 可达，别让
outline被全局重置干掉 - 无障碍属性别漏：如果卡片可展开/折叠，加上
aria-expanded和aria-controls
什么时候非得用 section 包一层
当一组卡片共享同一主题、且这个主题需要被屏幕阅读器或 SEO 识别时，section 就不是可有可无的装饰。比如“最新博客文章”“用户评论”这类带明确标题的区块，外面套 section + h2，既提升可访问性，也让 CSS 能精准作用于整组卡片（例如 section h2 控制标题样式，section > article 控制卡片间距）。
- 不要只为“看起来整齐”而加
section - 如果卡片来自不同上下文（比如侧边栏推荐 + 主内容区文章），别强行合并到一个
section -
section必须有视觉或语义上的标题（h2–h6），否则它就退化成普通div - 嵌套层级别太深：
main > section > article > section是反模式，第二层section大概率该换成div或删掉
语义清晰了，样式和交互才不容易跑偏。最常被忽略的是：卡片的语义边界一旦模糊，后续加动画、拖拽、服务端渲染时，DOM 结构就很难保持一致。
