The Article and Section Elements Explained
If you’re just starting with HTML, the <article> and <section> elements can feel confusing. They look similar, but they’re used for slightly different things.
In this beginner‑friendly guide, you’ll learn:
- What
<article>and<section>mean in plain language - When to use each one (with simple rules of thumb)
- How to build a small, well-structured page step by step
- How these tags help with accessibility and search engines
By the end, you’ll feel confident choosing the right element instead of guessing.
What Are <article> and <section>?
Let’s start with a simple idea:
<article>is for standalone content – something that could make sense on its own.<section>is for grouping related content inside a page.
Think of a newspaper:
- Each full news story =
<article>(it could be printed or shared by itself) - The parts inside that story (introduction, background, quotes) =
<section>(they are pieces of the whole)
You’ll use them together to create clean, logical structure.
Step 1: Start With a Simple Page
Let’s build a tiny blog-style page. First, here’s a very basic HTML page without any <article> or <section> yet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>My Coding Journey</h1>
<h2>Day 1</h2>
<p>Today I started learning HTML. It was fun and a bit confusing.</p>
<h2>Day 2</h2>
<p>I learned about semantic elements like article and section.</p>
</body>
</html>
This works, but it doesn’t clearly show where each post begins and ends. Let’s fix that.
Step 2: Wrap Each Post in an <article>
Each “day” on this page is like a mini blog post. It could be shared alone and still make sense. That’s a great use case for <article>.
We’ll wrap each post in an <article> element:
<body>
<h1>My Coding Journey</h1>
<!-- First standalone post -->
<article>
<h2>Day 1</h2>
<p>Today I started learning HTML. It was fun and a bit confusing.</p>
</article>
<!-- Second standalone post -->
<article>
<h2>Day 2</h2>
<p>I learned about semantic elements like article and section.</p>
</article>
</body>
What’s happening here?
<article>tells the browser: this block is a complete, independent piece of content.- Each
<h2>and<p>inside belongs to that specific article.
Result:
- Your HTML is easier to read and maintain.
- Screen readers (used by visually impaired users) can jump between articles more easily.
- Search engines can better understand what your page is about.
Try it yourself:
- Add a third
<article>for "Day 3" with your own text. - Open the file in your browser and see how neatly each post is grouped.
Step 3: Use <section> to Organize Inside an Article
Now imagine each blog post is a bit longer. You might want to split it into parts, like:
- An introduction
- What you did
- What you learned
These are sections inside the article, not separate articles themselves. Perfect for <section>.
Here’s how that looks:
<article>
<h2>Day 2</h2>
<!-- Intro section -->
<section>
<h3>Introduction</h3>
<p>Today I focused on semantic HTML elements.</p>
</section>
<!-- Main content section -->
<section>
<h3>What I Did</h3>
<p>I practiced using the article and section elements in a small web page.</p>
</section>
<!-- Reflection section -->
<section>
<h3>What I Learned</h3>
<p>I learned that article is for standalone content and section is for parts inside it.</p>
</section>
</article>
Why use <section> here?
- Each
<section>groups related content inside the article. - The headings (
<h3>) tell you what each part is about. - It gives your page a clear outline, like chapters in a book.
Quick rule of thumb:
- If the content could live on its own (like a full blog post, news story, or forum post) → use
<article>. - If the content is just a part of something bigger → use
<section>.
Step 4: Build a Full Mini Page With Both
Let’s put it all together into a more complete example. We’ll have:
- A main area
- A list of articles (blog posts)
- Each article split into sections
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Coding Journey</title>
</head>
<body>
<header>
<h1>My Coding Journey</h1>
<p>Tracking what I learn, one day at a time.</p>
</header>
<main>
<!-- First blog post -->
<article>
<h2>Day 1: Getting Started</h2>
<section>
<h3>Introduction</h3>
<p>Today I wrote my very first HTML page. It had a heading and a paragraph.</p>
</section>
<section>
<h3>Challenges</h3>
<p>I was unsure where to put some elements, but I kept experimenting.</p>
</section>
</article>
<!-- Second blog post -->
<article>
<h2>Day 2: Semantic HTML</h2>
<section>
<h3>What I Practiced</h3>
<p>I learned how to use the article and section elements to structure my content.</p>
</section>
<section>
<h3>My Takeaway</h3>
<p>Article is for standalone posts, while section is for grouping related content inside them.</p>
</section>
</article>
</main>
</body>
</html>
What you get from this structure
- The page has a clear top-level heading (
<h1>in the<header>). - Each post is marked as an
<article>. - Each article is broken into meaningful
<section>parts.
This is how many real blogs and news sites are structured.
Try it yourself:
- Add a new article called "Day 3: CSS Basics".
- Give it two sections: "What I Styled" and "What I Want to Learn Next".
Step 5: A Helpful Mental Model
If you’re still unsure, use this simple mental model:
- Imagine your page printed on paper.
- Anything that would be its own page or card →
<article>. - Anything that would be a sub-heading or chapter on that page →
<section>.
A few more everyday examples:
A recipe page:
<article>: the whole recipe<section>: ingredients, steps, tips
A news site homepage:
- Many
<article>elements: each news story - Inside each article:
<section>for background, quotes, details
- Many
You don’t have to be perfect. Even experienced developers sometimes adjust their structure later.
Step 6: Why This Matters (Even for Beginners)
You might think: “The page looks the same in the browser. Why bother?”
Here’s why it’s worth it:
- Accessibility: Screen readers can understand your content better and help users navigate between articles and sections.
- Search engines: Google and others use structure to guess what’s important and what belongs together.
- Teamwork: If you ever work with others, clean structure makes your HTML easier to read and update.
- Your own sanity: As your pages grow, good structure keeps things from turning into a mess.
You’re building good habits now that'll save you time and frustration later.
Try It Yourself: Small Practice Challenge
Create a new HTML file called practice.html and build a simple magazine-style page:
- A main title for the page (for example: “Tech Today”).
- Two
<article>elements:- One about "AI News"
- One about "Web Development Tips"
- Inside each article:
- Use at least two
<section>elements with headings and short paragraphs.
- Use at least two
Open the file in your browser. Even though it might look simple, you’ve just practiced real-world structure.
Quick Recap: Key Takeaways
<article>is for standalone pieces of content that make sense on their own (like blog posts, news stories, or forum posts).<section>is for grouping related content inside a page or article (like chapters, topics, or parts of a post).- Use headings (
<h1>–<h6>) inside sections to label what each part is about. - Good structure helps with accessibility, search engines, and keeping your code organized.
If you’ve followed along and written even one small example, that’s a real win. Keep experimenting, keep breaking (and fixing) things, and these elements will soon feel natural. Your future projects will be cleaner and easier to work with because of the habits you’re building now.
