The role and usage scenarios of the '<section>' tag

The <section> tag is a semantic element introduced in HTML5, used to define independent blocks within a document, typically representing a collection of related content. It helps developers better organize page structure, improving code readability and maintainability.

Basic Definition of the <section> Tag

The <section> tag represents an independent section of a document, usually containing a heading (<h1>-<h6>) and content. Its semantic nature allows browsers and search engines to better understand the page structure. Unlike <div>, <section> has clear semantics and is suitable for logically independent content blocks.

<section>
  <h2>About Us</h2>
  <p>We are a company focused on front-end technologies.</p>
</section>

Differences Between <section> and <div>

Although both <section> and <div> can be used to group content, their semantics differ. <div> is a pure container with no semantic meaning, while <section> represents an independent, meaningful content block. For example:

<!-- Using div -->
<div>
  <h2>Latest Articles</h2>
  <p>Here is the article list...</p>
</div>

<!-- Using section -->
<section>
  <h2>Latest Articles</h2>
  <p>Here is the article list...</p>
</section>

The latter code more clearly conveys the semantics of "this is an independent article block."

Typical Use Cases for <section>

1. Segmenting Articles

In long articles, <section> can be used to divide content into logical parts:

<article>
  <h1>HTML5 Semantic Tags</h1>
  <section>
    <h2>What Are Semantic Tags</h2>
    <p>Semantic tags refer to...</p>
  </section>
  <section>
    <h2>Common Semantic Tags</h2>
    <p>Includes header, footer, section, etc...</p>
  </section>
</article>

2. Independent Functional Blocks on a Webpage

Functional blocks on a webpage can be divided using <section>:

<section id="features">
  <h2>Product Features</h2>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
  </ul>
</section>

<section id="pricing">
  <h2>Pricing Plans</h2>
  <div class="price-table">...</div>
</section>

3. Tab Content

In tab components, the content of each tab can be represented with <section>:

<div class="tabs">
  <section id="tab1">
    <h2>Tab 1</h2>
    <p>Content 1...</p>
  </section>
  <section id="tab2">
    <h2>Tab 2</h2>
    <p>Content 2...</p>
  </section>
</div>

Nesting <section> Tags

<section> can be nested to represent hierarchical relationships:

<section>
  <h2>Chapter 1</h2>
  <section>
    <h3>Section 1.1</h3>
    <p>Content...</p>
  </section>
  <section>
    <h3>Section 1.2</h3>
    <p>Content...</p>
  </section>
</section>

Relationship Between <section> and Other Semantic Tags

Relationship with <article>

<article> represents independent, complete content, while <section> is used to group related content. An <article> can contain multiple <section> tags:

<article>
  <h1>How to Learn HTML5</h1>
  <section>
    <h2>Basic Knowledge</h2>
    <p>Basic concepts of HTML5...</p>
  </section>
  <section>
    <h2>Advanced Techniques</h2>
    <p>Using semantic tags...</p>
  </section>
</article>

Relationship with <aside>

<aside> is typically used for sidebars or content related but not directly part of the main content, and can be used alongside <section>:

<main>
  <article>
    <section>...</section>
  </article>
  <aside>
    <section>
      <h3>Related Links</h3>
      <ul>...</ul>
    </section>
  </aside>
</main>

Styling <section>

Although <section> is a semantic tag, it can also be styled with CSS:

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

section h2 {
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

ARIA Roles for <section>

By default, <section> has an ARIA role of region, which can be modified with the role attribute:

<section role="tabpanel">
  <h2>Tab Content</h2>
  <p>Here is the specific content of the tab...</p>
</section>

Browser Support for <section>

All modern browsers support the <section> tag, including:

• Chrome 6+
• Firefox 4+
• Safari 5+
• Edge 12+
• Opera 11.1+

For older browsers, support can be added via JavaScript:

<!--[if lt IE 9]>
<script>
  document.createElement('section');
</script>
<![endif]-->

Best Practices for <section>

1. Each <section> should have a heading (<h1>-<h6>).
2. Do not use <section> solely for styling; use <div> instead.
3. Avoid excessive nesting of <section>; typically no more than 3 levels.
4. Ensure the content of each <section> is logically independent.

<!-- Good Practice -->
<section>
  <h2>User Reviews</h2>
  <div class="reviews">
    <!-- Review content -->
  </div>
</section>

<!-- Bad Practice -->
<section class="red-box"> <!-- Used only for styling -->
  <p>Content here...</p>
</section>

Using <section> in Single-Page Applications (SPA)

In single-page applications (SPAs), <section> can be used to divide different views:

<body>
  <header>...</header>
  <main>
    <section id="home-view" class="active">...</section>
    <section id="about-view">...</section>
    <section id="contact-view">...</section>
  </main>
  <footer>...</footer>
</body>

<section> and Document Outlines

<section> affects the HTML5 document outline algorithm. Each <section> creates a new section, and heading levels adjust automatically based on nesting depth:

<body>
  <h1>Main Title</h1>
  <section>
    <h2>Part 1</h2> <!-- Level 2 heading in the outline -->
    <section>
      <h3>Subsection</h3> <!-- Level 3 heading in the outline -->
    </section>
  </section>
</body>

Accessibility Considerations for <section>

To enhance accessibility, add the aria-labelledby attribute to <section>:

<section aria-labelledby="section1-heading">
  <h2 id="section1-heading">Accessibility Guidelines</h2>
  <p>Content...</p>
</section>

Using <section> in CMS Systems

In content management systems (CMS), <section> can be used for template layouts:

<template id="page-template">
  <section class="content-block">
    <h2 data-field="title">Title Placeholder</h2>
    <div data-field="content">Content Placeholder</div>
  </section>
</template>

Combining <section> with Microdata

<section> can be combined with microdata to enhance SEO:

<section itemscope itemtype="http://schema.org/Book">
  <h2 itemprop="name">HTML5 Definitive Guide</h2>
  <p itemprop="description">A comprehensive guide to HTML5...</p>
</section>

<section> in Responsive Design

In responsive design, <section> can serve as a basic unit for breakpoint adjustments:

/* Small screens */
section {
  width: 100%;
  margin-bottom: 20px;
}

/* Large screens */
@media (min-width: 768px) {
  section {
    width: 48%;
    float: left;
    margin-right: 2%;
  }
}

<section> and Shadow DOM

In web components, <section> can be used with Shadow DOM:

class MySection extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <h2><slot name="title">Default Title</slot></h2>
      <div><slot></slot></div>
    `;
  }
}
customElements.define('my-section', MySection);

Usage:

<my-section>
  <span slot="title">Custom Title</span>
  <p>Here is custom content...</p>
</my-section>