HTML Section Tag: Syntax, Usage, and Examples

The HTML section tag (<section>) groups related content into a meaningful block, usually with its own heading. You use it to make long pages easier to understand, navigate, and style.

How to Use the Section Tag

The section tag is written as <section> ... </section>. You place it around content that belongs together as one topic or “chunk” of the page.

Here’s the basic syntax:

<section>
<h2>Section heading</h2>
<p>Related content goes here.</p>
</section>

A few rules of thumb make <section> much easier to use well:

• A section usually has a heading. Many sections start with an <h2> or <h3>. A heading acts like the label on a folder. No label, and people have to open it to guess what’s inside.
• Use <section> for meaning, not just layout. If you only need a wrapper to apply CSS, a <div> is often a better fit.
• Sections can be nested, but keep it tidy. Nesting works when you have a big topic with smaller sub-topics. If you’re nesting five levels deep, you probably need a different structure.

Here’s a realistic page layout showing multiple section blocks:

<main>
<h1>Community Gardening Guide</h1>

<section>
<h2>Choosing a Plot</h2>
<p>Pick a spot with enough sun and easy access to water.</p>
</section>

<section>
<h2>Soil Prep</h2>
<p>Add compost, remove rocks, and loosen the top layer.</p>
</section>

<section>
<h2>Planting Schedule</h2>
<p>Start cool-weather plants first, then warm-weather ones.</p>
</section>
</main>

How <section> fits into headings

The heading levels matter more than people expect. A common pattern is:

• <h1> for the page title
• <h2> for each top-level <section>
• <h3> for nested sections inside a section

Example:

<section>
<h2>Account Settings</h2>

<section>
<h3>Privacy</h3>
<p>Control who can see your profile.</p>
</section>

<section>
<h3>Notifications</h3>
<p>Choose what messages you want to receive.</p>
</section>
</section>

This reads like a table of contents, which is exactly what you want.

When to Use the Section Tag

The section tag is useful when you want the structure of the page to match the structure of the ideas. If you can describe a part of the page with a short heading, that part is often a good candidate for <section>.

Here are several common use cases.

Break a long article into clear topics

Articles, tutorials, and documentation pages often cover multiple sub-topics. Wrapping each one in a <section> makes the page easier to skim.

Think of a programming tutorial with parts like “Setup,” “Basic Example,” and “Troubleshooting.” Each of those belongs in its own section because each part answers a different question.

Group related content on landing pages

Landing pages often have repeating blocks like:

• Features
• Testimonials
• Pricing
• FAQs

Those blocks are perfect for the section tag because each one has a clear theme and a clear heading.

Help navigation and “jump links” feel natural

When you create a table of contents or in-page navigation, sections give you obvious anchor targets. You can add an id to a section and link straight to it.

<nav>
<ahref="#pricing">Pricing</a>
<ahref="#faq">FAQ</a>
</nav>

<sectionid="pricing">
<h2>Pricing</h2>
<p>Plans for learners and teams.</p>
</section>

<sectionid="faq">
<h2>FAQ</h2>
<p>Quick answers to common questions.</p>
</section>

Improve readability for assistive technology users

Screen reader users often navigate by headings and landmarks. Sections with clear headings help people move through a page without listening to every word.

The goal is simple: make the outline of the page make sense.

Examples of the Section Tag

Here are several examples that show the section tag in different contexts.

1) A blog post with sections that map to the outline

<article>
<h1>How to Debug JavaScript Faster</h1>

<section>
<h2>Start With the Console</h2>
<p>Log values at the moment you need them.</p>
</section>

<section>
<h2>Reduce the Problem</h2>
<p>Strip code down until the bug becomes obvious.</p>
</section>

<section>
<h2>Check Your Assumptions</h2>
<p>Many bugs come from “I was sure this was a number.”</p>
</section>
</article>

Why this works: each <section> is a topic with a heading, so the article becomes easy to skim and easy to navigate.

2) A product page with clear blocks

<main>
<h1>Study Planner</h1>

<section>
<h2>Features</h2>
<ul>
<li>Weekly goals</li>
<li>Reminders</li>
<li>Progress tracking</li>
</ul>
</section>

<section>
<h2>Pricing</h2>
<p>Free plan and paid plan available.</p>
</section>

<section>
<h2>Frequently Asked Questions</h2>
<p>Common questions, answered.</p>
</section>
</main>

Each block could stand on its own. That’s a great signal that <section> is appropriate.

3) A dashboard page with nested sections

Nested sections help when a page has a “big category” with smaller parts.

<main>
<h1>Account Overview</h1>

<section>
<h2>Profile</h2>

<section>
<h3>Public Info</h3>
<p>Name, bio, and profile picture.</p>
</section>

<section>
<h3>Security</h3>
<p>Password, two-factor auth, and sessions.</p>
</section>
</section>
</main>

This gives the page a clean outline. If you printed it as a list of headings, it would still make sense.

4) Using IDs on sections for in-page navigation

<navaria-label="On this page">
<ahref="#setup">Setup</a>
<ahref="#example">Example</a>
<ahref="#next-steps">Next steps</a>
</nav>

<sectionid="setup">
<h2>Setup</h2>
<p>Install dependencies and create the project folder.</p>
</section>

<sectionid="example">
<h2>Example</h2>
<p>Build a small working version before adding features.</p>
</section>

<sectionid="next-steps">
<h2>Next steps</h2>
<p>Add tests, handle edge cases, and polish the UI.</p>
</section>

If you’ve ever clicked “On this page” links in docs, you’ve seen this pattern in action.

Learn More About the Section Tag

<section> vs <div>

This is the most common question.

• Use <section> when the content forms a thematic group and usually has a heading.
• Use <div> when you need a generic container for styling or layout, and there’s no real “topic” to label.

Example where <div> makes more sense:

<divclass="two-column-layout">
<divclass="left">...</div>
<divclass="right">...</div>
</div>

That’s layout structure, not content meaning.

Example where <section> makes more sense:

<section>
<h2>Customer Stories</h2>
<p>People sharing what they built.</p>
</section>

That has a clear label, so it’s a section.

<section> vs <article>

Both group content, but they’re used for different kinds of grouping.

• <article> is for a self-contained piece that could stand alone, like a blog post, a forum post, or a news story.
• <section> is for a part of a page that belongs to a larger whole.

A blog page might look like this:

<article>
<h1>My First CSS Grid Layout</h1>

<section>
<h2>The Layout Goal</h2>
<p>What we are trying to build.</p>
</section>

<section>
<h2>The CSS</h2>
<p>The grid rules and why they work.</p>
</section>
</article>

The article is the main unit, the sections are the chapters.

<section> vs <nav>, <header>, and <footer>

Some HTML elements are more specific than <section>:

• <nav> is for major navigation links.
• <header> is for introductory content for a page or a section.
• <footer> is for closing content like legal text, related links, or author info.

You can still use <section> alongside them:

<section>
<header>
<h2>Resources</h2>
<p>Links you might want to bookmark.</p>
</header>

<ul>
<li><ahref="/docs">Docs</a></li>
<li><ahref="/tutorials">Tutorials</a></li>
</ul>

<footer>
<p>Updated January 2026</p>
</footer>
</section>

This is a nice pattern because it keeps the section’s intro and outro connected to the content they describe.

Does <section> create a “landmark” for accessibility?

In practice, screen readers rely heavily on headings and on landmark elements like <main>, <nav>, <header>, and <footer>. A <section> with a heading can be very helpful, but a <section> without a heading often adds little for navigation.

So the simple advice holds: if you use the section tag, give it a heading that describes the topic.

Styling sections with CSS

Sections are easy to style because the element name is predictable:

<style>
section {
padding:16px;
border:1px solid#ddd;
margin:16px0;
  }

section >h2 {
margin-top:0;
  }
</style>

In real projects, you might style via classes instead of targeting all sections, but the idea is the same.

Common mistakes with the section tag

Using <section> as a replacement for every <div>

That can make your HTML harder to read. Semantic tags are great, but only when they match the meaning.

Adding sections with no heading

A heading gives the section purpose. Without it, the section can feel like an unlabeled box.

Breaking the heading order

Jumping from <h2> to <h4> can confuse readers and assistive tools. Keep the heading levels consistent.

Wrapping tiny bits of content in sections

A single sentence usually doesn’t need its own <section>. That’s like giving one sock its own drawer.