article与section区别详解，html4如何替代

本文深入解析了HTML中`article`与`section`的核心语义区别：`article`专指具备独立分发、引用和订阅能力的内容单元（如博客正文、新闻稿、单条评论），而`section`仅用于文档内部逻辑分块（如“产品特性”），不构成完整信息实体；文章还揭示了HTML4时代缺乏原生语义元素的困境，指出仅靠`div+class`无法被屏幕阅读器和搜索引擎真正识别，需借助ARIA属性临时补救，并强调是否选用`article`的唯一判断标准是内容能否被RSS订阅或单独URL引用——这一语义选择直接影响可访问性、SEO表现及现代浏览器的结构化解析能力，即使需兼容老旧浏览器，也应优先保障功能可用，再通过渐进增强提升语义体验。

article 和 section 的语义差异到底在哪

区别不在嵌套规则或外观表现，而在内容是否具备「独立分发」能力。article 表示能脱离当前页面被单独引用、重用、订阅的内容单元，比如一篇博客正文、一条新闻、一个用户评论；section 只是文档内部的逻辑分块，比如“产品特性”“用户反馈”“技术参数”这些为组织内容服务的区块，本身不构成完整信息单元。

常见误用现象：
– 把整页导航栏、页脚包裹进 section（应直接用 nav / footer）
– 把带标题的列表项强行套 article（如“热门标签”列表里的每个标签不是独立内容）
– 在 article 内部又用 section 做小节划分（这完全合理，且推荐）

HTML4 里没有 article 和 section 怎么办

HTML4 没有语义化区块元素，开发者只能靠 div + class 名模拟，比如：

<div class="article">
  <h2>标题</h2>
  <p>正文...</p>
</div>

<div class="section">
  <h3>小节标题</h3>
  <p>内容...</p>
</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 或条件注释渐进增强。

今天关于《article与section区别详解，html4如何替代》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！