HTML <article> Tag

What You’ll Learn

By the end of this tutorial, you’ll confidently mark up self-contained content with semantic HTML in real-world projects.

What Is the <article> Tag?

The article element (<article>) defines a standalone piece of content. Ask yourself: “Would this block still make sense if I pulled it out and published it elsewhere?” If yes, use <article>.

Each article should include a meaningful heading (h1–h6) and can contain <header>, <footer>, <time>, and other flow content.

📝 Syntax

Wrap standalone content between opening and closing <article> tags. Include a meaningful heading for accessibility and SEO:

<!-- Basic article syntax -->
<article>
  <h2>Article Title</h2>
  <p>Introduction to your article...</p>
  <!-- Additional content -->
</article>

• <article> is a block-level flow element—not a void tag.
• Every article needs a descriptive heading for screen readers and SEO.
• Self-closing syntax (<article />) is not valid in HTML.

⚖️ <article> vs <section>

Both are sectioning elements, but they serve different purposes:

Examples Gallery

Five real-world article patterns with copy-ready code, live previews, and hands-on practice.

<article>
  <h2>Article Title</h2>
  <p>Introduction to your article...</p>
</article>

<article class="featured-article" id="main-article">
  <h2>The Importance of Learning HTML</h2>
  <p>HTML is the foundation of every website.</p>
  <footer>
    <p>Written by: Mari Selvan</p>
    <p>Published: June 7, 2026</p>
  </footer>
</article>

<style>
  article {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }
  article h2 { color: #1e40af; font-size: 1.125rem; }
</style>
<main>
  <article>
    <p class="post-meta">June 5, 2026</p>
    <h2>Blog Post Title</h2>
    <p>Content of your blog post...</p>
    <a href="#">Read more</a>
  </article>
</main>

<style>
  article.breaking { border-left-color: #dc2626; }
  article.sports { border-left-color: #2563eb; }
  article.weather { border-left-color: #d97706; }
</style>
<article class="breaking">
  <h2>Breaking News Title</h2>
  <p>Details of the breaking news...</p>
</article>

<article>
  <header>
    <h2>Getting Started with Semantic HTML</h2>
    <p>Published <time datetime="2026-06-07">June 7, 2026</time></p>
  </header>
  <p>Semantic HTML elements help browsers and search engines understand your content.</p>
  <footer>
    <address>Written by <a href="mailto:author@codetofun.com">Mari Selvan</a></address>
  </footer>
</article>

🔁 Nested Articles

An <article> can contain nested <article> elements for content related to the parent—most commonly user comments on a blog post:

<article>
  <h2>Blog Post Title</h2>
  <p>Main article content...</p>
  <section>
    <h3>Comments</h3>
    <article>
      <h4>Comment by Jane</h4>
      <p>Great article!</p>
    </article>
  </section>
</article>

♿ Accessibility

The <article> element creates an article landmark for screen readers. Follow these guidelines:

• Heading — every article needs a heading (h1–h6) that describes its topic
• Heading levels — maintain a logical outline; don’t skip levels inside an article
• Landmarks — avoid wrapping the entire page in one article; use one per distinct content block
• Labels — if multiple unnamed articles appear on a page, add aria-labelledby pointing to the article heading

💡 Best Practices