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. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “The article Element Self-Contained Content” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “The article Element Self-Contained Content”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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
- header nav main and footer
- The article Element Self-Contained Content
- The section Element vs div
- Time address and mark