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="/path-to-blog-post-1">
      <h3>Blog post 1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>Blog post 2</h3>
    </a>
  </article>
  <article>
    <a href="/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).


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on