Path // www.yourhtmlsource.com → Reference → <section>

<section>

The <section> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should typically have a heading and represent a thematic grouping of content. It's a sectioning element that contributes to the document's outline.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<section>
<h2>Section Heading</h2>
<p>Section content...</p>
</section>

The element requires both opening and closing tags. A section should typically contain a heading (h1-h6) as a child element, though this isn't strictly required. Each section introduces a new item in the document outline.

Attributes

Global attributes - The <section> element supports all global attributes such as id, class, style, lang, and dir.

The <section> element has no element-specific attributes.

Examples

Page Sections

<section>
  <h2>Introduction</h2>
  <p>Welcome to our website...</p>
</section>
<section>
  <h2>Our Services</h2>
  <p>We offer a variety of services...</p>
</section>
<section>
  <h2>Contact Us</h2>
  <p>Get in touch with our team...</p>
</section>

Article with Sections

<article>
  <h1>Complete Guide to CSS</h1>
  <section>
    <h2>What is CSS?</h2>
    <p>CSS stands for Cascading Style Sheets...</p>
  </section>
  <section>
    <h2>CSS Syntax</h2>
    <p>A CSS rule consists of...</p>
  </section>
  <section>
    <h2>Advanced Techniques</h2>
    <p>Once you master the basics...</p>
  </section>
</article>

Tabbed Interface Content

<div class="tabs">
  <section id="tab1">
    <h3>Description</h3>
    <p>Product description here...</p>
  </section>
  <section id="tab2">
    <h3>Specifications</h3>
    <ul>...specifications...</ul>
  </section>
  <section id="tab3">
    <h3>Reviews</h3>
    <p>Customer reviews here...</p>
  </section>
</div>

When to Use

Use the <section> element when:

Content forms a thematic grouping with its own heading
Breaking an article or page into logical parts
The content would appear as an entry in a document outline
Grouping content for chapters, tabbed content, or numbered sections
No other semantic element (article, nav, aside) is more appropriate

Do NOT use <section> when:

You need a generic container for styling (use <div> instead)
Content is self-contained and independently distributable (use <article>)
Content is tangentially related to surrounding content (use <aside>)
The section doesn't have or wouldn't logically have a heading

Important rule of thumb: If you can't give the section a meaningful heading, it probably shouldn't be a section element. The section element is for semantic structure, not styling purposes.