main 与 article

main 与 article 是两个内容容器：<main> 装页面的主题内容，全页只允许一个；<article> 装可以独立成篇的一段内容^[1][2]。它们的区别在范围，前者是"这一页在讲什么"，后者是"这一块独立成篇也能读"。

main 的三条限制

<main> 里不该重复出现站点级内容，例如侧边栏、导航、搜索框与页脚版权^[1]。它不能嵌在 <section>、<article>、<aside>、<header>、<nav> 里面^[1]。<main> 会自动形成 main 地标，读屏用户跳转的落点就是它^[3]。

article 的取值范围

博客文章、新闻报道、商品评价、论坛回帖、小组件都可以是一个 <article>；一篇文章里嵌套评论，评论再套一层 <article>，这是规范允许的形式^[2]。判断标准是这段内容离开原文还有没有意义，而不是它在页面布局里占几栏。

文章内部的 <header> 与 <footer> 不会变成页面级地标，banner 与 contentinfo 仍只来自文档顶层那一层^[3]。

与搜索的关系

<main> 给机器指出这一页的主体在哪一块，与正文相关性判断的方向一致^[4]。文章类内容用 Article 结构化数据描述时，标题、作者、发布日期的取值要和页面上能看到的文字一致，这一步与用什么标签无关^[4]。

常见误用

第一种是整页套一个 <div class="container">，主题内容没有容器可指。第二种是一页放两个 <main>，列表页与详情页混排时最容易犯。第三种是列表页把每条摘要都写成 <article>，页面上出现几十个"独立成篇"的短块^[2]。

附录

参见

• 语义化标签
• 标题层级
• header 与 footer
• aside 与 section
• 文章

参考资料

官方（境外）

1. 《<main>：主要内容元素》，MDN Web 文档。
2. 《<article>：文章内容元素》，MDN Web 文档。
3. 《Landmarks Pattern》，W3C WAI-ARIA Authoring Practices Guide。
4. 《Article 结构化数据》，Google 搜索中心。

外部链接

• HTML 标准：main 元素，WHATWG。