<article>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <article> 元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

尝试一下

给定文档中可以包含多篇文章;例如,阅读器在博客上滚动时一个接一个地显示每篇文章的文本,每个帖子将包含在 <article> 元素中,可能包含一个或多个 <section>

属性

此元素只具有全局属性

使用说明

  • 每个 <article>,通常包括标题(<h1><h6> 元素)作为 <article> 元素的子元素。
  • <article> 元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的 <article> 元素可嵌套在代表博客文章的 <article> 元素中。
  • <article> 元素的作者信息可通过 <address> 元素提供,但是不适用于嵌套的 <article> 元素。
  • 可以使用 <time> 元素的 datetime 属性来描述 <article> 元素的发布日期和时间。

示例

html
<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

技术概要

内容分类 流式内容分段内容短语内容
允许的内容 流式内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 所有接受流式内容的元素。注意<article>元素不能成为 <address> 元素的子元素。
隐含的 ARIA 角色 article
允许的 ARIA 角色 applicationdocumentfeedmainnonepresentationregion
DOM 接口 HTMLElement

规范

Specification
HTML
# the-article-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
article

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见