HTML <section> Element

Publish in HTML Tutorial el 25/05/2025 16:06

HTML <section> Element: The Complete Guide

The <section> element is a semantic HTML tag used to define thematic groupings of content in a document. Unlike generic containers like <div>, <section> carries meaning about the structure of your content, helping search engines and assistive technologies understand your page organization.

Key characteristics of <section>:

Represents a standalone section of content
Should typically have a heading (h1-h6)
Used for grouping related content
Helps with document outline and accessibility

Basic Syntax

Here's the fundamental structure of a section element:

When to Use <section>

Use <section> for:

Chapter-like divisions of content
Tabbed content areas
Thematic groups in long articles
Distinct portions of a web application

Avoid using <section> as a generic container - for that purpose, <div> is more appropriate.

Practical Examples

Example 1: Basic Section with Content

This shows a simple section containing an article preview:

Play Code

<section>
  <h2>Latest News</h2>
  <p>Stay updated with our recent developments and announcements.</p>
  <article>
    <h3>New Product Launch</h3>
    <p>We're excited to announce our newest product coming next month!</p>
  </article>
</section>

Example 2: Multiple Sections in Article

Demonstrating how sections can divide a long article into logical parts:

Play Code

<article>
  <h1>Advanced CSS Techniques</h1>
  
  <section>
    <h2>Flexbox Layout</h2>
    <p>Flexbox provides efficient way to lay out elements...</p>
  </section>
  
  <section>
    <h2>CSS Grid Systems</h2>
    <p>Grid offers two-dimensional layout capabilities...</p>
  </section>
  
  <section>
    <h2>Custom Properties</h2>
    <p>CSS variables bring reusability to your stylesheets...</p>
  </section>
</article>

Example 3: Section with Styling

Showing how sections can be styled while maintaining semantic meaning:

Play Code

<style>
  .feature-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .feature-box h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
  }
</style>

<section class="feature-box">
  <h2>Premium Features</h2>
  <ul>
    <li>Advanced analytics dashboard</li>
    <li>Priority customer support</li>
    <li>Custom branding options</li>
  </ul>
</section>

Example 4: Interactive Section with JavaScript

Demonstrating how sections can be manipulated with JavaScript:

Play Code

<section id="toggleSection">
  <h2>Click to Reveal Content</h2>
  <div style="display:none;">
    <p>This content was hidden and now is visible!</p>
    <p>JavaScript can dynamically show/hide section content.</p>
  </div>
</section>

<script>
  const section = document.getElementById('toggleSection');
  section.addEventListener('click', function() {
    const content = this.querySelector('div');
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });
</script>

Example 5: Dynamic Section Loading

Showing how sections can be loaded dynamically via AJAX:

Play Code

<main>
  <button onclick="loadSection()">Load Content</button>
  <section id="dynamicContent"></section>
</main>

<script>
  function loadSection() {
    const section = document.getElementById('dynamicContent');
    section.innerHTML = '<h2>Dynamically Loaded Content</h2>' +
      '<p>This content was loaded after page initialization.</p>' +
      '<p>Sections work well with dynamic content loading.</p>';
  }
</script>

Best Practices & Tips

Always include a heading: Each section should typically have a heading (h1-h6) to identify its purpose.
Don't use for styling only: If you need a container purely for styling, use <div> instead.
Nest sections logically: Sections can be nested to create a document outline.
Combine with ARIA: For complex sections, consider adding ARIA attributes for better accessibility.
Use for print styles: Sections make great targets for @media print rules.