Module 4: Structure and Semantics · Lesson 3 of 5
HTML article vs section vs aside: When to Use Each
All lessons in Module 4
- div and span
- Header, Nav, Main, Footer
- Article, Section, Aside
- Fix the Div Soup
- Project: Blog Page
Goal: Sort page content into article, section and aside.
Learn
Inside <main>, you can describe the content itself with three more semantic tags from the sections chapter of the HTML standard (opens in a new tab):
<article>wraps a piece that makes sense on its own: a blog post, a news story, a review. Ask yourself whether you could paste it on another site and still follow it.<section>marks one themed part of something bigger, like a chapter of a post. It almost always starts with a heading.<aside>holds related extras the reader could skip, such as a tip box or a sidebar.
Picture a newspaper page. Each story is an article. A long story is split into sections, and the little "Did you know?" box at the edge is an aside. The page-level regions around them come from Header, Nav, Main, Footer.
The short version
- Use
<article>for a piece that still makes sense when lifted out of the page, such as a post or a comment. - A
<section>is one themed part of something bigger, and it normally opens with a heading. - Put extras the reader can skip, like a tip box or an author bio, in an
<aside>. - Nesting works in both directions. An article can be split into sections, and a "Latest posts" section can hold several articles.
Example
<main>
<article>
<h2>Our First Garden</h2>
<section>
<h3>Spring</h3>
<p>We planted beans and sunflowers.</p>
</section>
<section>
<h3>Summer</h3>
<p>The sunflowers grew taller than the fence.</p>
</section>
</article>
<aside>
<p>Did you know? Young sunflowers turn to follow the sun.</p>
</aside>
</main>Your task
Right now this tea guide is a flat pile of elements. Give it structure:
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<section class="blue-box">
<p>Free shipping on all orders.</p>
</section>Right
<div class="blue-box">
<p>Free shipping on all orders.</p>
</div>A box that only exists to get a blue background is a div; sections are for themed parts with a heading.
Wrong
<article>
<h2>How to Brew Green Tea</h2>
<article>
<h3>Steps</h3>
<p>Steep the leaves for two minutes.</p>
</article>
</article>Right
<article>
<h2>How to Brew Green Tea</h2>
<section>
<h3>Steps</h3>
<p>Steep the leaves for two minutes.</p>
</section>
</article>Read alone, the Steps part makes no sense without the rest of the guide, so mark it up as a section inside the article.
Go deeper
The "could it stand alone?" test applies well beyond blog posts. A blog's homepage usually lists post previews, and each preview gets its own <article>. Comments under a post are often articles too, nested inside the post's article, since each comment is a complete contribution. You will build exactly this in the Blog Page project.
Screen readers handle the three tags differently. A page-level <aside> is exposed as a complementary landmark, one of the landmark regions (opens in a new tab) the W3C describes. A <section> becomes a region landmark only once it has an accessible name, for example <section aria-labelledby="steps"> pointing at its heading's id. Articles are announced as articles, so a user can hop from one story to the next.
Reader modes and feed tools often look for <article> to find the main text. A tidy article wrapper makes their job easier.
Can't come up with a heading for a section? Then it probably isn't one. Use a div, or skip the wrapper.
Frequently asked questions
What is the difference between article and section in HTML?
Independence. An <article> is complete by itself, so you could move it to another page or a news feed and it would still read fine. A <section> is one themed part of a bigger whole, like a chapter, and leans on what surrounds it. A quick test: if you would share it as a link of its own, use article. If it needs the rest of the page, use section.
Is aside only for sidebars?
No. The tag says what the content is, and says nothing about where it sits. A glossary box, a pull quote, an author bio or a list of related links all fit in <aside>. CSS decides whether it shows up in a side column, under the text or in the normal flow. An aside inside an article belongs to that article. Outside any article, it belongs to the whole page.
Can I use section instead of div?
Only for a real themed part of the content that has its own heading. For a wrapper that exists to add a background or build columns, use <div>. A page where every styling box is a section gets a cluttered outline full of nameless parts, and that works against the whole idea of semantic HTML (opens in a new tab).
