📌 Introduction
The <article> tag is used to define independent, self-contained content.
This means the content inside it can stand alone and still make sense outside the page.
Common examples:
- Blog posts
- News articles
- Product cards
- Forum posts
🧱 Syntax
<article>Content here</article>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Article Example</title>
</head>
<body>
<main>
<article>
<h2>Learn HTML Basics</h2>
<p>HTML is the foundation of web development.</p>
</article>
<article>
<h2>Learn CSS Basics</h2>
<p>CSS is used to style websites.</p>
</article>
</main>
</body>
</html>
🖥️ Output Explanation
- Each
<article>represents a separate content block - Each one can exist independently
- Often used in blogs and news websites
🎯 When to Use <article>
Use it for:
- Blog posts
- News articles
- Forum messages
- Product listings
- Comments
Example:
<article>
<h2>My First Blog Post</h2>
<p>This is my journey learning HTML.</p>
</article>
🧠 Important Concept
👉 An <article> should be:
- Self-contained
- Meaningful on its own
- Able to be reused elsewhere
⚖️ <article> vs <section>
| Tag | Purpose |
|---|---|
<article> |
Independent content (standalone) |
<section> |
Group of related content |
Simple rule:
- If it can stand alone →
<article> - If it is part of a topic →
<section>
🧩 Example Together
<section>
<h2>Latest Posts</h2>
<article>
<h3>Post 1</h3>
<p>Content of post 1</p>
</article>
<article>
<h3>Post 2</h3>
<p>Content of post 2</p>
</article>
</section>
🚫 Common Mistakes
- Using
<article>for everything ❌ - Not using headings inside it ❌
- Confusing it with
<div>❌
🎨 Styling Example
<article style="border:1px solid #ccc; padding:10px;">
<h2>Blog Title</h2>
<p>Blog content here...</p>
</article>
🧪 Mini Exercise
Create a page with:
A
<main>sectionInside it, add 3
<article>elements:- Each with a title and paragraph
Style each article with borders or background color