为什么应该选择 HTML5 article 而不是 section

Desknumber

浏览器对嵌套在 <section> 元素内的标题进行视觉显示，使其看起来好像正在为这些标题分配逻辑层次结构。然而，这纯粹是视觉上的，不会传达给辅助技术。在本文中，Bruce Lawson 解释了 <section> 的用途以及作者应如何标记对 AT 用户非常重要的标题。 前几天，我和一些朋友聊天，其中一个朋友问我HTML中的<article>和<section>有什么区别。这是 Web 开发的永恒谜团之一，就像“为什么是空白：nowrap，而不是空白：no-wrap？”一样。以及“为什么 CSS ‘gray’ 的颜色比 ‘darkgray’ 更深？”。

我给出了我通常的答案：将 <article> 不仅仅视为报纸文章或博客文章，而是一件衣服 - 一个可以在其他地方重复使用的离散实体语境。所以你的裤子就是一件物品，你可以用它搭配不同的衣服；你的 电子邮件营销列表 衬衫是一件物品，可以搭配不同的裤子；你的及膝漆皮细高靴是一件物品（你不会只穿其中一件，不是吗？）。 规范说明： “文章元素代表文档、页面、应用程序或站点中的完整或独立的组合，原则上是可独立分发或可重用的，例如在联合组织中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具或任何其他独立的内容项。



” 因此，包含博客文章列表的主页将是一个 <main> 元素，其中包含一系列 <article> 元素，每个元素对应一个博客文章。您可以对视频列表（例如 YouTube）使用相同的结构，其中每个视频都包含在 <article> 中、产品列表（例如 Amazon）等中。这些 <article> 中的任何一个在概念上都是可聚合的 - 每个都可以独立地出现在自己的专用页面上、另一个页面上的广告中、作为 RSS 提要中的条目等等。 Apple 的 WatchOS 包含 Reader，它使用 <article> 元素来了解页面的主要内容。