Semantic HTML: <div> vs. <section> vs. <article>

Published on: by Dr. Talib

When you're first learning HTML, it's tempting to use the <div> tag for everything. It's a generic container that works, but it tells us nothing about the content inside. Modern HTML gives us powerful "semantic" tags that describe their content, making our websites better for search engines and accessibility tools.

The <div>: The Generic Box

When to use it: Use a <div> only when there is no other, more appropriate semantic element. Its sole purpose is for styling or grouping elements when no other tag makes sense.

Think of it as the last resort. For example, a container that just centers your whole page layout is a perfect use case for a <div>, because it has no meaning to the content itself.

Example of a good `div` use case:

<!-- This div is purely for styling a 'wrapper' -->
<div class="page-wrapper">
  <h1>My Page</h1>
  <p>Content here...</p>
</div>

The <section>: A Thematic Grouping

When to use it: A <section> is for grouping together related content. A good rule of thumb is to ask, "Would this part of the page have a heading in a document outline?" If the answer is yes, <section> is probably the right choice.

Examples include an "About Us" block, a "Latest News" feed, or a "Contact Information" block on a homepage.

Example of a `section`:

<section>
  <h2>About Our Company</h2>
  <p>We were founded in 2024 with a mission to...</p>
</section>

<section>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>SEO Optimization</li>
  </ul>
</section>

Try it Yourself: While this looks the same as using divs in the HTML Viewer, a screen reader or search engine now understands that these are distinct, related blocks of content.

The <article>: A Self-Contained Piece of Content

When to use it: An <article> represents a complete, self-contained piece of content that could, in theory, be distributed on its own and still make sense. This is the most important distinction.

Think of a blog post, a news story, a forum comment, or a product listing on an e-commerce site. Each one is a standalone "article."

Example of an `article`:

<!-- This whole page you are reading could be wrapped in an article tag! -->
<main>
  <article>
    <h1>My Awesome Blog Post</h1>
    <p>This is the first paragraph of my post...</p>
    <!-- More content here -->
    <footer>
      <p>Posted by Dr. Talib</p>
    </footer>
  </article>
</main>

It can get meta: A <section> called "Latest Blog Posts" could contain multiple <article> elements inside it. The section groups them, but each article is its own complete item.

Why Does This Matter?

  • Accessibility: Screen readers can use semantic tags to navigate a page, for example, by jumping from one <article> to the next.
  • SEO: Search engines like Google give more weight to content inside meaningful tags. An <h1> inside an <article> is a strong signal about the page's topic.
  • Maintainability: Your code becomes far easier to read and understand for you and other developers.

Choosing the right tag gives your content meaning. Start by defaulting to semantic elements and only reach for a <div> when nothing else fits.