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