0Pricing
HTML Academy · Lesson

The article Element Self-Contained Content

Use article for independently distributable content.

The article Element Self-Contained Content is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is article?

The <article> element represents self-contained, independently distributable content:

  • It makes sense on its own, outside the page context
  • You could syndicate it (RSS, social card) without losing meaning

When to Use article

Use <article> for:

  • Blog posts
  • News articles
  • Forum posts
  • Product cards
  • Comments (individual comments are articles)
  • Widget or gadget

article Structure

A typical article includes header, content, and footer:

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

Nested articles (Comments)

Articles can be nested to represent replies or sub-content:

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

Product Cards as article

Product or content cards can be articles:

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

article vs section

Common confusion — article vs section:

  • <article> — self-contained; would make sense pulled out of the page
  • <section> — thematic grouping; requires surrounding context to make sense
<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

article and Schema.org

Combine article with Schema.org JSON-LD for rich search results:

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

The cite Element

Use <cite> for the title of a work or attribution:

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

rel=author on Links

Mark authorship links within article with rel="author":

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

Multiple articles on a Page

Multiple articles can appear in a list or feed:

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

When Not to Use article

Do not use <article> for:

  • General page sections without independent meaning
  • Navigational elements
  • Marketing sections on a homepage (use <section>)
  • Sidebar widgets (use <aside>)

Quick Check

What is the defining characteristic of content that belongs in an article element?

Recap: article Element

Article element essentials:

  • Self-contained, independently distributable content
  • Can be syndicated (RSS, social preview) without losing meaning
  • Examples: blog posts, news, product cards, comments
  • Can be nested (post with nested comment articles)
  • Use rel="author" on authorship links inside article

Frequently asked questions

Is the “The article Element Self-Contained Content” lesson free?

Yes — the full text of “The article Element Self-Contained Content” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The article Element Self-Contained Content”?

Use article for independently distributable content. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The article Element Self-Contained Content” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. header nav main and footer
  2. The article Element Self-Contained Content
  3. The section Element vs div
  4. Time address and mark
← Back to HTML Academy