The Right Way to Use the <section> Tag (and When to Avoid It)

Misusing <section> can turn clean HTML into noise.
Using it well adds clarity, accessibility, and structure that screen readers, search engines, and teammates all appreciate.

I once audited a site with more than 400 <div> tags and not a single <section>. It rendered fine, yet the document had no spine: boxes inside boxes, inconsistent headings, and no landmarks. Sighted users could scroll; screen readers, search engines, and the next developer could not reason about it.

That audit was my “a-ha” moment: structure isn’t optional. It is the backbone of readable, maintainable pages. Used correctly, <section> turns a layout into content that teams and tools can navigate with confidence, improving onboarding, QA, and SEO.

What the <section> Tag Really Means

A web page is like a nonfiction book: it has a title, an introduction, chapters, side notes, and references. The <section> tag is the chapter. According to the HTML specification, a section is a “thematic grouping of content.” In practice, if you can give the block its own heading and explain it as a distinct topic, it probably belongs inside a <section>.

This approach is not just academic. It helps teams document structure clients can maintain, making handoffs smoother and long-term ownership less painful.

When to Use <section> (Real-World Scenarios)

The <section> tag shines when content has a clear theme and a heading that makes sense on its own. Here are common cases:

  • A testimonials block with a heading such as “What Clients Are Saying”
  • An FAQ group under “Common Questions”
  • A pricing chart introduced by “Plans & Pricing”
  • A collection of case studies with its own section heading

In practice, these are the blocks clients expect to find quickly, search engines want to interpret correctly, and teams need to update without confusion. Marking them with <section> gives everyone a clear starting point.

How to Apply <section>: Right vs. Wrong Examples

Seeing it in code makes the difference obvious. Here's a side-by-side comparison.

❌ Wrong (just containers, no meaning):

<div class="pricing">
  <div class="item">Starter - $19/mo</div>
  <div class="item">Pro - $49/mo</div>
  <div class="item">Enterprise - Custom</div>
</div>

✅ Better (semantic structure with a heading):

<section>
  <h2>Plans & Pricing</h2>
  <ul>
    <li>Starter - $19/mo</li>
    <li>Pro - $49/mo</li>
    <li>Enterprise - Custom</li>
  </ul>
</section>

The first example renders visually, but it tells machines and teammates nothing. The second adds a clear heading and hierarchy, which helps screen readers, improves SEO, and makes life easier for the next developer. Notice this because it shows an attention to detail that scales in real projects.

Why It Matters for Accessibility, SEO, and Scale

  • Accessibility: Screen reader users can jump between <section> elements the way sighted readers skim chapters.
  • SEO: Clear structure helps search engines understand topics, surface featured snippets, and index with greater accuracy.
  • Developer sanity: Semantic markup is easier to debug, extend, and hand off across teams.
  • Manager clarity: Reduces errors, avoids rework, and builds confidence that the brand will look consistent in every channel.

Good structure is like giving your page a roadmap. Machines can follow it. Humans benefit from it. More importantly, it shows a mindset of building systems that last, support collaboration, and scale gracefully over time.

When Not to Use <section>

Sometimes, you just need a container. That is what <div> is for. I avoid <section> in cases like:

  • Decorative wrappers, such as background images or layout helpers
  • Nested grids or flex containers without a standalone topic
  • Modals or components that do not require a logical heading

In short: if the block does not have its own topic or heading, it does not belong in a <section>. Honest semantics matter more than extra tags.

Answering “Isn’t This Just Semantics?”

Yes, it is. And that is exactly why it matters. Semantics separate a structured document from a pile of anonymous boxes. They allow assistive technology to parse meaning rather than pixels, and they ensure your content survives design changes, platform shifts, and new devices with clarity intact.

Think of semantic HTML like labeled storage bins: anyone opening the page should know what each part is for. The alternative is a junk drawer of <div> soup.

Practical Takeaways for Your Next Project

  • If you can name the block and give it a heading, wrap it in a <section>.
  • If it is only for styling or layout, keep it in a <div>.
  • Think in chapters, not just anonymous boxes.
  • For stronger accessibility and SEO, start with honest semantics.

Frequently Asked … Answered.

No. <div> is still useful for styling and layout wrappers. Use <section> only when the content can stand alone as a topic with its own heading.
Yes. A page can have many <section> elements, just like a book has many chapters. The key is that each section should be labeled with a heading that describes its topic.
Use <section> for grouping content under a theme. Use <article> for standalone content that could be distributed on its own, such as a blog post, news item, or forum entry.
Not by itself. But it helps search engines parse your content more accurately. When combined with headings and meaningful structure, it supports stronger SEO and featured snippets.


Put It to Work

Whether you are a developer cleaning up a codebase, a PM defining specs, or an SEO lead improving crawlability, solid structure makes everything easier. If your site feels like a junk drawer of <div>s, it can be turned into a clear, labeled system that scales with confidence and clarity.

Still unsure how to structure your next page? Schedule a quick conversation and let's make sense of it together — clear steps, no jargon, no judgment.