Definition and Usage

<section> tag represents a generic section of a document or application.
This section refers to a group of content organized by a specific topic, and while a heading is not required, it is commonly used.

This tag is used to represent a group of content organized by topic from a logical perspective, when there is no more semantically appropriate element, such as <article>, <aside>, or <nav>, to indicate a section.

Practical Examples

  • A section that covers each individual topic on a web page (e.g., a product section, an introduction, etc.)
  • A slider and each individual slide container
  • Each tab page in a tabbed dialog
  • Dividing a homepage into sections such as introduction, news, and contact

Basic Example

The following is an example showing how to use the <section> tag to logically separate content by topic.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Project Overview</title>
    </head>
    <body>
        <header>
            <h1>Our Project</h1>
        </header> 
        <nav>
            <ul>
                <li><a href="#section1">Project Goals</a></li>
                <li><a href="#section2">Progress</a></li>
                <li><a href="#section3">Results and Future Plans</a></li>
            </ul>
        </nav> 
        <section id="section1">
            <h2>Project Goals</h2>
            <p>This section describes the goals and objectives of the project.</p>
        </section>
        <section id="section2">
            <h2>Progress</h2>
            <p>This section provides information on the current progress of the project.</p>
        </section>
        <section id="section3">
            <h2>Results and Future Plans</h2>
            <p>This section covers the results of the project and future plans.</p>
        </section>
        <footer>
            <p>© 2025 Our Project. All rights reserved.</p>
        </footer>       
    </body>
</html>

This example demonstrates how to use the <section> tag to separate each topic into independent sections and place relevant content within each section.

Syntactic Features

  • The <section> tag cannot be a child or descendant element of the <address> tag, because the <address> tag does not allow sectioning content.
  • Do not use the <section> tag as a generic container without semantic meaning. If your purpose is purely styling, use a <div> tag instead.
  • When defining a topic-based section, include a heading tag (<h1>~<h6>) within the <section> tag. This helps identify the topic, although it is not strictly required.

Differences Between <section> and <article> Tags

It is easy to confuse the intended usage of the <section> and <article> tags.
The following summarizes the differences between these two tags:

  • The <section> tag is used to represent a topic-based content group in a document or application from a logical perspective.
  • In contrast, the <article> tag is used to group content that is independently distributable or reusable.
  • When content consists of items that can be independently distributed or reused, the <article> tag may be a better choice.

Code Explanation
The <article> tag is used to group content that can be independently distributed or reused within a document, page, application, or site. Examples include forum posts, news articles, blog posts, and comments.

Usage Examples

The following are key examples demonstrating how the <section> tag can be used.

Using the <section> Tag Inside an <article> Tag

It is possible to use the <section> tag within an <article> tag. The <article> tag represents an independently distributable piece of content, and the <section> tag can be used to further divide that content logically.

Here is a simple example of using <section> tags inside an <article> tag:

HTML 
<article>
    <h1>Latest Recipe Collection</h1>
    <p>Introducing the best recipes of the week.</p>
    <section>
        <h2>Breakfast</h2>
        <p>Recipe ideas suitable for the morning.</p>
    </section>
    <section>
        <h2>Lunch</h2>
        <p>Recommended recipes for lunch.</p>
    </section>
    <section>
        <h2>Dinner</h2>
        <p>Check out ideas and recipes for dinner.</p>
    </section>
</article>

Using <section> tags inside an <article> this way allows you to logically separate the content, enhancing both the meaning and structure of the webpage.

Using as Sidebar Widget Sections

Widgets in a sidebar can be represented as independent blocks, and within each <section> tag, you can define content related to a specific widget. This approach creates a more logical page structure and provides additional information or complements the main content for users.

For example, when displaying sidebar widgets on a webpage, use <section> tags inside an <aside> tag.

Explanation
The <aside> tag represents a separate section of content that is indirectly related to the main content of a page. It is typically used for sidebars or additional information related to the document.

HTML 
<aside>
    <section>
        <h2>Weather Widget</h2>
        <p>Displays current weather information and forecasts.</p>
    </section>
    <section>
        <h2>Social Media Widget</h2>
        <p>Shows the latest tweets and social media updates.</p>
    </section>
    <section>
        <h2>Advertisement Widget</h2>
        <p>Displays ads or recommended products.</p>
    </section>
</aside>

Using Each Slide Container in a Slider

Sliders are used when topics or content are presented sequentially, and each slide can represent a logical part of a topic or section. The <section> tag can be used to represent each slide.

For example, if a webpage slider displays information about travel destinations, each slide can contain information about a specific destination, and the <section> tag can group the content for that slide.

HTML 
<div id="slider">
    <section>
        <h2>Paris, France</h2>
        <p>Experience the beauty of traveling in Paris.</p>
        <!-- Content for this slide -->
    </section>
    <section>
        <h2>Rome, Italy</h2>
        <p>Explore the history and culture of Rome.</p>
        <!-- Content for this slide -->
    </section>
    <section>
        <h2>Tokyo, Japan</h2>
        <p>Plan an amazing trip in Tokyo.</p>
        <!-- Content for this slide -->
    </section>
</div>

This way, each slide is structured as a topic-based content group, enhancing the semantic structure of the webpage.

Related Attributes

The <section> tag has no tag-specific attributes. All global attributes can be used with this tag.

Technical Syntax Summary

Technical Syntax Summary of the <section> tag
Permitted parents The <section> tag must not be a descendant of the <address> tag.
Implicit ARIA role If an accessible name is provided through a heading (<h1>~<h6>), aria-labelledby, aria-label, or title, the implicit role is region; otherwise, it is generic.
Permitted ARIA roles alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel

Browser compatibility

Browser compatibility for the section tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<section> 5 12 4 5

Specifications

Specification for the section tag
Specification
<section> HTML Standard
#the-section-element

References

See also