<article>

The HTML <article> element represents a self-contained piece of content that could be distributed independently. The content should make sense if extracted from the page and used on its own, typically using a heading. It is a semantic element used for blog posts, news articles, news articles, forum posts, product reviews, and other standalone content.

💡 Tip: Use <article> when the content could be used independently from the rest of the page.

Syntax

<article>
  <h2>Blog post 1</h2>
  <p>Blog pose content...</p>
</article>

Basic usage

Here's a simple example of using the <article> element:

<article>
  <h2>Using the HTML article element</h2>
  <p>The HTML article element represents a self-contained piece of content that could be distributed independently...</p>
  <footer>
    <p>Published on <time datetime="2024-03-18">March 18, 2024</time></p>
  </footer>
</article>

Multiple articles on a page

You can have multiple <article> elements on a page:

<main>
  <article>
    <h2>CSS Grid Layout Guide</h2>
    <p>Learn how to create responsive layouts using the CSS Grid...</p>
  </article>

  <article>
    <h2>JavaScript Fundamentals</h2>
    <p>Master the basics of JavaScript programming...</p>
  </article>

  <article>
    <h2>Vue.js Components</h2>
    <p>Master reusable components with Vue.js...</p>
  </article>
</main>

Nested articles

Articles can be nested within other articles, providing the content is related:

<article>
  <h2>Web Development Best Practices</h2>
  <p>Main article</p>

  <article>
    <h3>Search Engine Optimization</h3>
    <p>Nested article</p>
  </article>

  <article>
    <h3>Accessibility Guidelines</h3>
    <p>Nested article</p>
  </article>

  <article>
    <h3>Performance Optimization</h3>
        <p>Nested article</p>
  </article>
</article>

<article> vs <section>

• <article>: Self-contained content that could be distributed on its own.
• <section>: Use when the content is a standalone, meaningful part of your web page.

<!-- Use <article> for standalone content thet could be extracted from the document -->
<article>
  <h2>Complete Guide to CSS Flexbox</h2>
  <p>This is a complete, standalone tutorial...</p>
</article>

<!-- Use <section> for thematic grouping of content -->
<section>
  <h2>CSS Layout Methods</h2>
  <p>This section groups related content about CSS layouts...</p>
</section>

Common use cases

Here are some common use cases for the <article> element:

• Blog posts.
• Social media posts.
• News articles.
• Forum posts.
• Comments.
• Product reviews.
• Any other content that could stand alone if removed from the web page.

Accessibility and best practices

• Always include a heading (<h1>-<h6>) as the first child of <article>
• Make sure articles would be understood on their own, outside of the rest of the page.
• Use semantic elements inside articles where possible.
• Include author information if applicable.
• Use the <time> element for publication dates.

Styling

The <article> element can be styled using CSS:

article {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}

article h2 {
  color: #3d3b3b;
  margin-bottom: 1rem;
}

Conclusion

The <article> element is used to create self-contained content blocks that could be shared or reused independently. Use it to improve the structure of your web pages.