Problem Statement
What makes content suitable for an <article> element?
Explanation
The article element is for self-contained, independently distributable content that makes sense on its own. Ask yourself: could this content be syndicated, shared, or distributed separately? Examples include blog posts, news articles, forum posts, product cards, user comments, or social media posts. Each article should be independently understandable without the rest of the page. You can nest articles, like comments within a blog post article. Articles can contain their own headers, footers, and sections. Using article helps search engines and RSS readers identify distributable content. It improves semantic structure and makes content more accessible. The article element is more specific than section and indicates content that could stand alone.
Code Solution
SolutionRead Only
<!-- Blog post article -->
<article>
<header>
<h2>Understanding Semantic HTML</h2>
<p>By Jane Smith | Published: Jan 15, 2024</p>
</header>
<p>Semantic HTML is important because...</p>
<p>More content...</p>
<footer>
<p>Tags: HTML, Web Development</p>
</footer>
</article>
<!-- News article -->
<article>
<h2>Tech Company Launches New Product</h2>
<p>Date: January 15, 2024</p>
<p>Article content...</p>
</article>
<!-- Product card -->
<article class="product-card">
<img src="laptop.jpg" alt="Laptop">
<h3>Professional Laptop</h3>
<p>$999</p>
<button>Add to Cart</button>
</article>
<!-- Blog post with comments (nested articles) -->
<article>
<h2>Main Blog Post</h2>
<p>Post content...</p>
<section>
<h3>Comments</h3>
<article>
<p>Comment by User1...</p>
</article>
<article>
<p>Comment by User2...</p>
</article>
</section>
</article>