Learn to distinguish between <article> and <section> by applying the "standalone content" test, ensuring your HTML structure is semantically correct.
What it is
The <article> element represents a self-contained composition in a document, page, application, or site that is intended to be independently distributable or reusable. Examples include blog posts, news stories, forum posts, or product listings. The <section> element represents a generic standalone section of a document, typically with a heading. It groups related content but does not necessarily stand alone outside the context of the parent document.
Mental Model: Ask yourself: "If I copied this block of code and pasted it into a completely different website, would it still make sense?" If yes, use <article>. If no, because it relies on surrounding context to be understood, use <section>.
Why it matters
- Accessibility: Screen readers use these landmarks to help users navigate complex pages efficiently.
- SEO: Search engines better understand content hierarchy and relevance when semantic tags are used correctly.
- Maintainability: Clear structure makes code easier for developers to read and update.
- Reusability: Properly marked articles can be easily syndicated via RSS feeds or embedded in other contexts.
Syntax or steps
- Identify the content block you want to wrap.
- Apply the standalone test: Does this content have meaning without the rest of the page?
- If it stands alone (e.g., a blog post), wrap it in
<article>. - If it is part of a larger narrative or grouping (e.g., a chapter within a book, or a tab panel), wrap it in
<section>. - Always include a heading (
<h1>-<h6>) inside both elements to define their scope.
Example
<main>
<!-- This article stands alone: it has a title, date, and complete thought -->
<article>
<header>
<h2>Understanding Semantic HTML</h2>
<p>Published on October 24, 2023</p>
</header>
<p>Semantic HTML improves accessibility and SEO...</p>
</article>
<!-- This section depends on the previous article's context -->
<section>
<h3>Related Topics</h3>
<ul>
<li><a href="#">ARIA Roles</a></li>
<li><a href="#">Heading Hierarchy</a></li>
</ul>
</section>
</main>In this example, the <article> contains a complete blog post entry. Even if moved to another site, the reader understands what it is. The <section> lists related topics; without the preceding article, the phrase "Related Topics" lacks specific meaning.
Common mistakes
- Using
<div>instead of<section>: Avoid using<div>for structural grouping when a semantic tag like<section>applies.<div>should only be used for styling hooks with no semantic meaning. - Nesting articles unnecessarily: Do not wrap every piece of text in an
<article>. Only use it for distinct, independent compositions. - Omitting headings: Both
<article>and<section>should generally contain a heading to clarify their purpose to assistive technologies. - Confusing layout with semantics: Remember that these tags describe what the content is, not how it looks. Use CSS for layout.
When to use it
| Scenario | Recommended Element | Reasoning |
|---|---|---|
| A single blog post on a homepage | <article> | The post is a complete, independent unit of content. |
| A chapter within a long-form guide | <section> | The chapter is part of a larger whole and may not make sense alone. |
| A comment thread under a post | <article> | Each individual comment is often treated as a standalone contribution. |
| A tabbed interface panel | <section> | The panel content is dependent on the tab context. |
Practice
Guided Exercise: Take a snippet of HTML representing a user profile card (name, bio, avatar). Decide if it should be an <article> or <section>. Hint: If the profile card appears in a list of search results, does it still convey who the person is? Yes? Then it is likely an <article>.
Challenge: Refactor a standard webpage footer containing copyright info and social links. Should this be a <footer>, <section>, or <article>? Solution hint: Use <footer> for metadata about its nearest ancestor <article> or <body>.
Quick check
Question: You are building a news website. Each news story has a headline, body, and author. What element wraps each story?
Answer: <article>, because each news story is a self-contained composition that could be syndicated or viewed independently.
Summary
Use <article> for content that makes sense on its own, such as blog posts or comments. Use <section> for thematic groupings within a larger document that rely on context. Applying the standalone test ensures your HTML remains accessible, SEO-friendly, and logically structured.