article 表示可独立分发、引用、订阅的内容单元，如博客正文、新闻、评论；section 仅是文档内部逻辑分块，如“产品特性”，不构成完整信息单元。
article 和 section 的语义差异到底在哪
区别不在嵌套规则或外观表现，而在内容是否具备「独立分发」能力。article 表示能脱离当前页面被单独引用、重用、订阅的内容单元，比如一篇博客正文、一条新闻、一个用户评论；section 只是文档内部的逻辑分块，比如“产品特性”“用户反馈”“技术参数”这些为组织内容服务的区块，本身不构成完整信息单元。
常见误用现象：
– 把整页导航栏、页脚包裹进 section（应直接用 nav / footer）
– 把带标题的列表项强行套 article（如“热门标签”列表里的每个标签不是独立内容）
– 在 article 内部又用 section 做小节划分（这完全合理，且推荐）
HTML4 里没有 article 和 section 怎么办
HTML4 没有语义化区块元素，开发者只能靠 div + class 名模拟，比如：
<div class="article">
<h2>标题</h2>
<p>正文...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
<div class="section">
<h3>小节标题</h3>
<p>内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
但仅靠 class 不会被屏幕阅读器或搜索引擎识别为内容结构，也无法触发现代浏览器的语义化解析行为（如自动生成大纲、辅助导航）。若需兼容旧环境又想保留语义，可配合 ARIA 属性临时补救：
-
role="article"加在div上，部分读屏软件可识别 -
role="region"或aria-labelledby可替代section的作用，但不如原生语义可靠
什么时候必须用 article，而不是 section
判断依据只有一个：这个内容块能否被 RSS 订阅、被第三方聚合、被单独 URL 引用。满足就用 article，否则优先考虑 section 或更具体的语义元素（如 aside、nav）。
- 博客文章、论坛帖子、新闻稿 →
article - 同一页面中多个同类
article应包裹在main或section中（例如“最新文章列表”本身是section，里面每篇是article） - 用户评论区整体是
section，每条评论是article（因每条评论可被单独引用、回复、转发） -
article内部可包含header、footer、section，但不能把article当作样式容器滥用
浏览器兼容性和实际影响
article 和 section 在 IE8 及更早版本完全不识别，连基本样式支持都没有；IE9+ 开始支持，但不支持其语义化行为（如大纲生成）。不过，只要不依赖 CSS 选择器 article 或 JS 查询 document.querySelector('article')，降级到 div 并加 class 是安全的。
真正的影响在可访问性与 SEO：
- 使用原生语义元素后，Chrome DevTools 的「Accessibility」面板能正确显示结构树
- Google 搜索结果中可能提取
article的header h1作为摘要标题 - 部分 CMS（如 WordPress 主题）会根据
article自动添加itemprop微数据
如果项目必须支持 IE8，别硬套 HTML5 语义——先确保功能可用，再通过 Modernizr 或条件注释渐进增强。
