Article vs Section in HTML: Key Differences and Usage Guide

The <article> element represents a self-contained, independent piece of content that can stand alone, like a blog post or news story. The <section> element groups related content within a page but is not necessarily independent, often used to divide a page into thematic areas.

Quick Comparison

Here is a quick side-by-side comparison of <article> and <section> elements in HTML:

Factor	<article>	<section>
Purpose	Independent, self-contained content	Thematic grouping of content within a page
Content Meaning	Complete on its own (e.g., blog post)	Part of a larger whole (e.g., chapter, group)
Use Case	Blog posts, news articles, comments	Page sections, chapters, tabs
Semantic Role	Represents a standalone item	Represents a section of a document
Accessibility	Can be used as landmark for assistive tech	May be landmark if given heading
Nesting	Can contain <section> or other elements	Can be nested inside <article> or other sections

Key Differences

The <article> element is designed for content that makes sense on its own outside the page context. For example, a news story or a blog post can be shared or syndicated independently. It usually has its own heading and can be distributed separately.

In contrast, the <section> element is used to group related content within a page. It divides the page into thematic areas but does not imply the content is independent. Sections often have headings to describe their content but rely on the larger page context.

From an accessibility perspective, <article> elements are recognized as standalone landmarks by screen readers, helping users navigate independent content. <section> elements become landmarks only if they have a heading; otherwise, they are just generic containers.

Code Comparison

Example of using <article> for a blog post:

html

<article>
  <h2>My Trip to the Mountains</h2>
  <p>I had a wonderful time hiking and enjoying nature.</p>
</article>

Output

My Trip to the Mountains
I had a wonderful time hiking and enjoying nature.

Section Equivalent

Example of using <section> to group related content within a page:

html

<section>
  <h2>About the Mountains</h2>
  <p>The mountains are known for their beautiful trails and wildlife.</p>
</section>

Output

About the Mountains
The mountains are known for their beautiful trails and wildlife.

When to Use Which

Choose <article> when: You have a piece of content that can stand alone, like a blog post, news story, or user comment. It should make sense if taken out of the page.

Choose <section> when: You want to divide your page into thematic groups or chapters that are part of a larger whole, such as sections of a report or different topics on a page.

Key Takeaways

<article> is for independent, self-contained content.

<section> groups related content within a page.

<article> can be a landmark for assistive technologies by default.

<section> needs a heading to be a landmark.

Use <article> for standalone posts; use <section> for page divisions.