How to use the HTML <article> Element

Learn how to use the HTML <article> element.

The HTML <article> tag is used to define article elements for self-contained content. Self-contained means that the content you put inside an article element should work independently from the rest of your website.

How to use the HTML <article> tag

Use cases for the <article> tag:

• Blogs
• Magazines
• News sites

Unlike the <main> element, which also a content container, the <article> tag can be used once or several times within the same HTML document.

For example, you can use a single <article> element as the main page container element, for articles/posts:

<article>
  <h1>Title of your post</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <img href="your-image.jpg" alt="description of image" />
  <p>Paragraph</p>
  <p>Paragraph</p>
</article>

The website you’re reading on right follows a similar HTML markup structure. You can see it for yourself if you right-click on this website and click Inspect.

The <article> element can also be used to display a list of different content, each inside their own article element. For example, an article feed with links to individual posts:

<div>
  <article>
    <a href="/https/www.wsxdn.com/path-to-blog-post-1">
      <h3>Blog post 1</h3>
    </a>
  </article>
  <article>
    <a href="/https/www.wsxdn.com/path-to-blog-post-2">
      <h3>Blog post 2</h3>
    </a>
  </article>
  <article>
    <a href="/https/www.wsxdn.com/path-to-blog-post-3">
      <h3>Blog post 3</h3>
    </a>
  </article>
</div>

Each of the three articles above are read as independent, self-contained content by the web browser.

The <article> tag is one of many HTML tags used to define container elements. Some of the most commonly used HTML container elements are:

<section>, <main> , <header>, <footer>,<form>, and <div> (which is a generic tag that we use if none of the other tags apply).