HTML5 <article> Tag

The HTML <article> tag is used to represent a self-contained portion in a webpage which is intended to be independently distributable or reusable (e.g., in syndication). Examples where using this tag makes sense include a forum post, a magazine or newspaper article, or a blog entry on a webpage.

The only content permitted inside this element is Flow content i.e., elements that typically contain text. Both the starting and ending tag are mandatory for this element. The parent of the <article> tag can be any element that accepts flow content.

You must keep in mind that an <article> element must not be a descendant of an <address> element.

You should identify each <article>, typically by including a heading (<h1>-<h6> element) as a child of the <article> element. In case of nested articles, the inner element will represent an article related to the outer element. For example, the comments of a blog post can be wrapped in <article> tag nested in the <article> representing the blog post. Author information of an <article> element can be provided through the <address> element, but it doesn’t apply to nested <article> elements.

The following style is applied to this element by default:

article {
  display: block;
}

Here is an example of using this tag:

<article class="full_post">
  <header>
    <h4>HTML Ipsum</h4>
  </header>
  <section class="main_post">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </section>
  <section class="user_comments">
    <article class="user_comment">
      <p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <footer>
        <p> Posted on <time datetime="2016-02-24 19:00">Feb. 24, 2016</time> by Lisa. </p>
      </footer>
    </article>
    <article class="user_comment">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <footer>
        <p> Posted on <time datetime="2017-02-23 19:00">Feb. 23, 2017</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>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML article Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <article> element on MDN.
  2. You can also read the HTML <article> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top