Article and section

Learn the difference between <article> and <section>.

The article tag

The <article> tag marks a self-contained, independent piece of content. A blog post, a news item or a comment should keep its meaning even when moved elsewhere.

Example: <article><h2>Post Title</h2><p>Post text...</p></article>. It usually holds a heading and a body. A page can hold many <article> elements; on a home page each summary can be its own <article>.

The section tag

The <section> tag marks a part that gathers around a theme. It usually holds a heading and splits the page into meaningful chunks. Unlike article, a section is not self-contained; it is a piece of the page.

Example: <section><h2>Comments</h2><p>Comment text...</p></section>. Here the page's comments area is marked. Use <section> to group several related parts.

Exercise Write an article and a section

Add a <section> to body; inside it put an <h2> with the text Recent posts. Inside the section add an <article> with an <h3> and a <p>. The <h3> text should be First post, the <p> text A short note.

Show example solution

<body>
  <section>
    <h2>Recent posts</h2>
    <article>
      <h3>First post</h3>
      <p>A short note.</p>
    </article>
  </section>
</body>

Test yourself

Which is the best fit for <article>?
- The bottom of the page
- A menu
- An image gallery
- A single blog post
Show answer

A single blog post — Correct. A blog post stands alone, so it fits an article.

Complete the section

<____>
  <h2>Services</h2>
  <p>What we offer...</p>
</section>

Show answer

<section>
  <h2>Services</h2>
  <p>What we offer...</p>
</section>

Match each tag to its role

<article>

Self-contained content
<section>

Themed part
<header>

Top of a section
<h2>

Subheading

Next lesson: Aside and address

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies