Of all the semantic elements in HTML, article and section cause the most head-scratching. They look nearly identical; both wrap chunks of content, and many experienced developers admit they guess which one to use. The previous entry in this series covered the layout elements that frame a whole page. This one goes inside the main content area.
The good news is that there is a simple test for each, and a clear third option for when neither fits.
The Article Element
<article> <h2>Why Image Size Matters</h2> <p>Published 3 March 2026</p> <p>The body of the post goes here.</p></article>
An article is a self-contained piece of content that would still make sense if you lifted it out of the page and placed it somewhere else entirely. Think of a blog post, a news story, a forum post, a product card, a review or a comment. If it could be syndicated, shared or read on its own, the article is probably right.
A useful test is to ask whether the content could appear in an RSS feed or a search result as its own item. If so, it earns the article element.
The Section Element
<section> <h2>Our Services</h2> <p>A short introduction to what we offer.</p></section>
A section is a thematic grouping of content, normally with a heading. It divides a page or an article into meaningful parts, but unlike an article, those parts depend on their surroundings to make sense. A services section on a home page, or a chapter within a long guide, are typical examples.
The matching test is to ask whether the block has a natural heading. If you cannot think of a sensible heading for it, it probably is not a section.
When Neither Is Right, Use a Div
<div class=”card-grid”> <article>…</article> <article>…</article></div>
Many things on a page are grouped purely for styling or layout, not because they represent a distinct piece of content. A wrapper that sets up a grid, a container that centres content or a box that holds a background colour does not need a semantic element. The div remains the right tool here, and using it is not a failure of good practice.
How They Fit Together
<main> <h1>Latest News</h1> <article> <h2>First story</h2> <section> <h3>Background</h3> <p>…</p> </section> <section> <h3>What happens next</h3> <p>…</p> </section> </article> <article> <h2>Second story</h2> <p>…</p> </article></main>
The two can nest in either direction. An article can contain sections, as above, and a section can contain several articles, such as a list of latest posts on a page. What matters is that each element is describing what the content really is.
Why Getting This Right Genuinely Matters
- Assistive technology can use these elements to help users navigate between distinct items and sections, particularly when each has a heading
- Search engines and AI tools get a clearer signal about where one piece of content ends and another begins, which helps them interpret and extract the right passage
- Reader modes, feed readers and other tools that reprocess web content rely on articles to identify what is worth showing
- Cleaner, more meaningful markup is easier to maintain, particularly on pages that mix several kinds of content
Common Mistakes to Avoid
- Using section as a general-purpose replacement for div, simply to avoid div
- Using section without any heading, which leaves it with no real meaning
- Wrapping an entire page in a single article when it holds several unrelated pieces of content
- Using article for every box that merely looks like a card, when the content would not stand alone
- Skipping heading levels inside them, which undermines the structure they are meant to provide
Article and Section in WordPress
Many WordPress themes already wrap each post in an article element, particularly in archive and blog listings. Block themes add the Group block, which can be set to output a div, section, article, header, main or footer, so you can choose the right element without touching code. It is worth checking that your own custom blocks and page builder sections are using appropriate elements, since some builders wrap everything in generic containers by default.
A Quick Article and Section Checklist
☐ Use article for content that could stand alone, such as a post, review or product card
☐ Use section for a themed part of a page or article that has its own heading
☐ Use div for grouping that exists only for styling or layout
☐ Give each section and article a heading
☐ Keep heading levels in a logical order inside nested elements
☐ Check your theme or builder output in the page source rather than assuming
Frequently Asked Questions
What is the difference between article and section?
An article is a self-contained piece that makes sense on its own, such as a blog post. A section is a themed part of a larger whole and depends on its surroundings. If you could publish it independently, it is an article. If it is one part of something bigger, it is a section.
Can I put a section inside an article?
Yes, and it is common. A long post might use sections for its major parts, each with its own heading. Articles can also sit inside sections, for example, a list of recent posts under a news heading.
Do article and section help my SEO?
They are not a direct ranking factor. They help search engines and assistive tools understand the structure of your content, which supports clear indexing and a better experience for visitors.
Should every section have a heading?
Generally yes. A section without a heading is hard to describe or navigate, and is usually a sign a div would be more appropriate.
Does WordPress use article elements for posts automatically?
Most themes do, especially for blog listings and single posts. You can confirm by viewing your page source and looking for article tags around each post.
Want Your Page Structure Checked?
If you would like a second opinion on how your pages are built under the hood and whether the markup is helping or holding you back, get in touch for a plain conversation with no obligation and no sales pitch.