<section> & <article>
Group related content; mark up self-contained pieces.
1Section vs Article
<article> is content that could stand alone (blog post, comment, product card). <section> is a thematic grouping of content with a heading. When in doubt, prefer <article> for self-contained items.
<article>
<h2>Blog post title</h2>
<p>Post body...</p>
</article>
<section>
<h2>Recent Comments</h2>
<article><p>Great post!</p></article>
<article><p>Thanks for sharing.</p></article>
</section>2Put the element in context
An article is a self-contained composition, while a section groups content around a subject in the current context. Neither is a general replacement for a styling wrapper. A section usually benefits from a heading that makes its subject clear.
3Practice with a small page
Mark a blog post as an article and its themed parts as sections with headings. Compare a separate related-post card that can stand on its own. Use a div for a purely visual wrapper without inventing an unnecessary document section.
Finished reading?
Mark this topic as complete to track progress.