Why Section and article in HTML? - Purpose & Use Cases

The Big Idea

Discover how simple tags can make your webpage clear and friendly for everyone!

The Scenario

Imagine you are writing a long webpage about your favorite hobbies. You just type everything in one big block of text without any breaks or labels.

The Problem

Without clear parts, it's hard for readers to find the information they want. Also, screen readers and search engines get confused because they don't know where one topic ends and another begins.

The Solution

Using <section> and <article> tags helps you divide your page into meaningful parts. Each part can have its own heading and content, making the page easier to read and understand.

Before vs After

✗ Before

<div>My hobbies are reading, painting, and hiking. I love books about history and science. I also enjoy creating colorful paintings and exploring nature trails.</div>

✓ After

<section>
  <h2>Reading</h2>
  <p>I love books about history and science.</p>
</section>
<article>
  <h2>Painting</h2>
  <p>I enjoy creating colorful paintings.</p>
</article>

What It Enables

It lets you organize content clearly so everyone, including assistive tools, can understand your page structure easily.

Real Life Example

News websites use <article> for each story and <section> for different topics like sports, weather, and entertainment.

Key Takeaways

Sections and articles break content into meaningful parts.

They improve readability and accessibility.

They help browsers and tools understand your page better.