<section>

Definition and Usage

The <section> element establishes a section in a document.

A section is a thematic grouping of content, typically with a heading. Sections are used to organize page content into logical groups.

Examples of where a <section> element can be used:

• Chapters in a document
• Numbered sections in a thesis
• Different tabs in a tabbed dialog box
• Thematic groups on a home page (introduction, features, testimonials)
• Parts of an article (introduction, main content, conclusion)

Attributes

The <section> tag supports the Global Attributes in HTML.

The <section> tag also supports the Event Attributes in HTML.

Examples

Basic Section with Heading

Create a simple thematic section:

<section>
  <h2>Introduction</h2>
  <p>This is the introductory section of the document.</p>
  <p>It provides background information and context.</p>
</section>

Article with Multiple Sections

Divide an article into logical sections:

<article>
  <h1>Understanding HTML5 Sections</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 introduced semantic elements for better document structure.</p>
  </section>

  <section>
    <h2>Main Concepts</h2>
    <p>Sections help organize content into thematic groups.</p>
  </section>

  <section>
    <h2>Conclusion</h2>
    <p>Using sections improves accessibility and SEO.</p>
  </section>
</article>

Landing Page Sections

Structure a landing page with thematic sections:

<main>
  <section id="hero">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing products and services.</p>
  </section>

  <section id="features">
    <h2>Features</h2>
    <ul>
      <li>Fast Performance</li>
      <li>Easy to Use</li>
      <li>Secure</li>
    </ul>
  </section>

  <section id="testimonials">
    <h2>What Our Customers Say</h2>
    <blockquote>This product changed my life!</blockquote>
  </section>

  <section id="contact">
    <h2>Contact Us</h2>
    <p>Email: info@example.com</p>
  </section>
</main>

Nested Sections

Create hierarchical content structure:

<section>
  <h2>Chapter 1: Getting Started</h2>

  <section>
    <h3>1.1 Installation</h3>
    <p>Follow these steps to install the software...</p>
  </section>

  <section>
    <h3>1.2 Configuration</h3>
    <p>Configure your settings as follows...</p>
  </section>

  <section>
    <h3>1.3 First Steps</h3>
    <p>Now you're ready to begin...</p>
  </section>
</section>

Section with ARIA Label

Improve accessibility with ARIA labels:

<section aria-label="Product specifications">
  <h2>Technical Specifications</h2>
  <dl>
    <dt>Processor:</dt>
    <dd>Intel Core i7</dd>
    <dt>Memory:</dt>
    <dd>16GB RAM</dd>
    <dt>Storage:</dt>
    <dd>512GB SSD</dd>
  </dl>
</section>

Styled Sections with CSS

Apply custom styling to sections:

<style>
  section {
    margin: 40px 0;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  section h2 {
    color: #745af2;
    border-bottom: 3px solid #745af2;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  section:nth-child(even) {
    background: #e8f4f8;
  }
</style>

<section>
  <h2>Styled Section</h2>
  <p>This section has custom CSS styling applied.</p>
</section>

Try it Yourself

Section vs Article vs Div

When to Use Section

• Should have a heading: If your content doesn't have a natural heading, use <div> instead
• Thematic grouping: Content within a section should be related by theme
• Part of a larger document: Sections are typically parts of articles or pages, not standalone
• Not for styling: Don't use section just to apply CSS styles; use <div> for that

Accessibility and ARIA

• Always include a heading element within each section
• Use aria-label or aria-labelledby to provide accessible names when needed
• Screen readers can navigate by sections, improving document navigation
• Proper heading hierarchy (h1-h6) within sections helps assistive technology
• Sections create landmark regions that users can jump to

<section aria-labelledby="about-heading">
  <h2 id="about-heading">About Us</h2>
  <p>Learn more about our company and mission.</p>
</section>

Best Practices

• Always include a heading (<h1>-<h6>) as the first element in a section
• Use sections for thematic groups of content, not just for styling purposes
• Maintain a logical heading hierarchy within your sections
• Don't use section as a wrapper for styling; use <div> instead
• Consider if <article> is more appropriate for self-contained content
• Use semantic structure to improve SEO and accessibility
• Sections can be nested to create hierarchical document structures
• Add id attributes to sections for anchor links and navigation

Default CSS Settings

Most browsers will display the <section> element with the following default values:

section {
  display: block;
}

Related Tags

• <article>

  Defines independent content

• <div>

  Defines a generic container

• <header>

  Defines a header for a section

• <footer>

  Defines a footer for a section

• <main>

  Defines main content of document

• <aside>

  Defines content aside from main