<section> - document section

<section> is one of the semantic tags introduced in HTML5, used to define independent sections or blocks within a document. It typically contains a group of related content, such as chapters in an article, panels in a tabbed interface, or standalone functional modules on a page. Unlike <div>, <section> carries explicit semantic meaning, which enhances code readability and SEO effectiveness.

Basic Usage of <section>

The syntax of the <section> tag is very simple—just wrap the content between <section> and </section>. Here’s a basic example:

<section>
  <h2>About Us</h2>
  <p>We are a company focused on front-end technologies, dedicated to providing users with high-quality web experiences.</p>
</section>

In this example, <section> defines an independent block containing a heading and a descriptive paragraph. Browsers do not apply any default styling to <section>, so you’ll need to customize its appearance using CSS.

Semantic Meaning of <section>

The primary purpose of <section> is to structure a document semantically. Compared to <div>, <section> is more suitable for logically independent content blocks. For example:

<article>
  <h1>HTML5 New Features</h1>
  <section>
    <h2>Semantic Tags</h2>
    <p>HTML5 introduced many semantic tags, such as &lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, etc.</p>
  </section>
  <section>
    <h2>Multimedia Support</h2>
    <p>HTML5 natively supports audio and video playback without relying on Flash.</p>
  </section>
</article>

Here, <section> is used to divide the article into different chapters, each with a clear theme. This structure not only makes it easier for developers to understand but also helps search engines parse the content.

Differences Between <section> and <article>

Both <section> and <article> are semantic tags, but they serve different purposes:

• <article> is used for independent, self-contained content, such as blog posts, news articles, or comments.
• <section> is used to divide a document into chapters or blocks, usually accompanied by a heading.

The following example illustrates their differences:

<article>
  <h1>How to Learn Front-End Development</h1>
  <section>
    <h2>HTML Basics</h2>
    <p>Learning HTML is the first step in front-end development.</p>
  </section>
  <section>
    <h2>CSS Layout</h2>
    <p>Mastering CSS layout techniques is key to building beautiful pages.</p>
  </section>
</article>

In this example, <article> wraps a complete article, while <section> divides it into distinct parts.

Nesting <section> Tags

<section> can be nested to represent more complex document structures. For example:

<section>
  <h2>Front-End Tech Stack</h2>
  <section>
    <h3>HTML</h3>
    <p>HyperText Markup Language, used to define webpage structure.</p>
  </section>
  <section>
    <h3>CSS</h3>
    <p>Cascading Style Sheets, used to style webpages.</p>
  </section>
</section>

Nested <section> tags can clearly express hierarchical relationships in content, but avoid excessive nesting to maintain readability.

Practical Use Cases for <section>

<section> is suitable for various scenarios. Here are some common examples:

1. Dividing Article Chapters

<article>
  <h1>JavaScript Closures</h1>
  <section>
    <h2>What Is a Closure</h2>
    <p>A closure refers to a function's ability to access variables outside its lexical scope.</p>
  </section>
  <section>
    <h2>Applications of Closures</h2>
    <p>Closures are often used in modular development and private variable encapsulation.</p>
  </section>
</article>

2. Functional Blocks on a Page

<main>
  <section>
    <h2>Latest Products</h2>
    <div class="product-list">
      <!-- Product list -->
    </div>
  </section>
  <section>
    <h2>User Reviews</h2>
    <div class="reviews">
      <!-- User reviews -->
    </div>
  </section>
</main>

3. Tabbed Content

<div class="tabs">
  <section>
    <h2>Tab 1</h2>
    <p>This is the content of the first tab.</p>
  </section>
  <section>
    <h2>Tab 2</h2>
    <p>This is the content of the second tab.</p>
  </section>
</div>

Notes on Using <section>

1. Avoid Overuse: <section> should be used for logically independent content blocks, not merely as styling containers. If styling is the only goal, <div> is more appropriate.
2. Include Headings: Each <section> should typically include a heading (e.g., <h2>) to clarify its theme.
3. Don’t Replace <article>: If the content is self-contained (e.g., a blog post), prioritize using <article>.

Styling <section>

By default, <section> is a block-level element, and its styling can be customized with CSS. For example:

<style>
  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;
  }
</style>

<section>
  <h2>CSS Styling Example</h2>
  <p>This is a &lt;section&gt; block with custom styling.</p>
</section>

Accessibility of <section>

The semantic nature of <section> enhances accessibility. Screen readers can recognize <section> and inform users about the document’s structure. To further optimize, you can combine it with ARIA attributes:

<section aria-labelledby="section1-heading">
  <h2 id="section1-heading">Accessibility Example</h2>
  <p>Enhancing &lt;section&gt; accessibility with ARIA attributes.</p>
</section>