article Element in HTML
Blog Posts, News, and Syndicated Content

HTML <article> Element: Content That Stands on Its Own

In web writing, not everything is part of the same story. Some content can — and should — live on its own. That's what <article> is for: self-contained units that make sense independently, like blog posts, news pieces, or even user reviews.

What Is the <article> Element?

The <article> element represents a standalone block of content. It’s meant to be reused, republished, or syndicated independently of the rest of the page.

Think: blog entries, product descriptions, or fruit facts — ready to go solo.

Basic Syntax

<article>
  <h2>Banana Nutrition Facts</h2>
  <p>Bananas are packed with potassium and make a great energy snack.</p>
</article>

Banana Nutrition Facts  
Bananas are packed with potassium and make a great energy snack.

This article could be copied into a feed, exported to an app, or bookmarked as its own item — and it would still make sense.

When to Use <article>

• Blog posts
• News stories
• Forum entries or discussion threads
• Product listings or documentation chunks
• Testimonials, reviews, and social updates

Example: Fruit Blog with Multiple Articles

<main>
  <article>
    <h2>Apple: Crisp and Classic</h2>
    <p>Apples are crunchy and come in many varieties, like Fuji and Gala.</p>
    <footer>
      <p>Published on <time datetime="2025-05-24">May 24, 2025</time></p>
    </footer>
  </article>

  <article>
    <h2>Cherry: Sweet and Bright</h2>
    <p>Cherries are small stone fruits that thrive in early summer.</p>
    <footer>
      <p>Written by Fruit Enthusiast</p>
    </footer>
  </article>
</main>

Apple: Crisp and Classic  
Apples are crunchy and come in many varieties, like Fuji and Gala.  
Published on May 24, 2025

Cherry: Sweet and Bright  
Cherries are small stone fruits that thrive in early summer.  
Written by Fruit Enthusiast

Each article can stand on its own, yet together they build a cohesive blog or feed.

Syndication-Ready Content

Articles are often targeted for syndication via RSS or APIs. The <article> element ensures each chunk is exportable and meaningful when removed from the larger document.

Nested Elements in <article>

It’s common to include <header>, <footer>, and other semantic tags inside an article.

<article>
  <header>
    <h2>Fruit Spotlight: Banana</h2>
    <p>Written by BananaFan — 2 min read</p>
  </header>

  <p>Bananas grow in tropical climates and ripen after harvest...</p>

  <footer>
    <p>Comments (12) | Share</p>
  </footer>
</article>

Accessibility & Best Practices

• Use unique <h2> titles in each article for clarity
• Keep article content meaningful when isolated
• Use <time>, <footer>, and <header> to support metadata

Summary

The <article> element makes content modular and portable. You've learned how to:

• Identify content that should live in an <article>
• Structure blog posts, reviews, and syndication-ready sections
• Apply semantic structure for better accessibility and SEO

What’s Next?

Next, we’ll learn how to group content by theme using the <section> element — perfect for breaking content into clear, readable chunks.