article表示可独立分发、复用的内容单元，如博客正文、新闻稿；section仅表示依赖上下文的主题性分组，如文章章节或页面模块。
Section 和 Article 没有布局区别——它们默认都不带任何样式，也不会影响页面排版或盒模型。 你用哪个标签，对 CSS 布局、Flex/Grid 行为、margin/padding 渲染完全没影响。真正起作用的是语义，不是视觉。
为什么浏览器渲染效果一样，但 SEO 和读屏器表现天差地别
搜索引擎和辅助技术（如 NVDA、VoiceOver）会主动解析 article 和 section 的语义层级，而不是只看 DOM 结构：
-
article被 Google 明确识别为「独立内容单元」，RSS 解析器默认只抓取article内容，忽略section - 浏览器阅读模式（如 Safari Reader、Firefox Reader View）优先提取
article，对section可能直接跳过或降权 - WCAG 要求每个
article应有<h1>–<h6></h6> </h1>标题；section则非强制，但缺标题会让语义弱化 - 误把产品列表项写成
<section class="product"></section>，而非<article class="product"></article>，会导致每条产品无法被单独索引为搜索结果
哪些场景必须用 article，换用 section 就会丢 SEO 权重
判断标准只有一个：这段内容能否脱离当前页面，单独发 RSS、被爬虫当一篇独立文章收录、或复制到别处仍能看懂？ 能，就该用 article：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 博客正文、新闻稿、论坛主帖 → 必须
article，否则 Google 可能不将其作为独立页面索引 - 用户评论（含作者名、时间、正文）→ 每条评论都应是
article，不是section或div - 电商首页的「热销商品」卡片 → 若每张卡含图、标题、价格、短描述，且支持弹窗/侧栏复用 →
article - 错误做法：
<section><span>#前端</span></section>给标签列表套section—— 标签不是内容单元，不适用
section 不是“次级 article”，而是逻辑分组容器
section 的价值不在 SEO 主权重，而在结构信号：它告诉机器「这一块内容主题一致，且依赖上下文」。滥用或错位会稀释主干结构：
- 博客文章内部的「背景」「实现步骤」「踩坑记录」小节 → 各自用
section，合理；若写成article，反而割裂主内容 - 首页的「关于我们」「服务流程」「客户案例」模块 → 各自用
section，因为它们共同构成整页叙事，拆出来意义不全 - 导航栏、页脚、侧边栏 → 不该用
section，而应优先用nav、footer、aside；硬套section属于语义退化 - 整页最外层包一个
<section></section>→ HTML5 没有「页面根区块」概念，纯属冗余，用main或直接留空更准确
最容易被忽略的一点：嵌套本身不提升 SEO，但方向错了会破坏大纲。比如在 article 里套一个无标题、无主题的 section，DOM 层级变深了，语义却更模糊——屏幕阅读器播报时反而更难定位重点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
