Semantic & Interactive

<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.

Example Code

<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>

Finished reading?

Mark this topic as complete to track progress.

<main> Tag

Next Topic

<aside> Tag