HTML <section> Tag

The HTML <section> tag represents a generic section of a document or application.

Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.

Syntax

The <section> tag is written as <section></section> with the section content enclosed between the start and end tags.

Like this:

 
<section>
    Content here...
</section>

Examples

Basic Context

Here are some examples of where the <section> tag can go within an HTML document. You can place it anywhere that "flow content" is expected (basically anywhere within the body of the document).

xxxxxxxxxx
 
<!DOCTYPE html>
<title>Example</title>
<style>
header, 
article, 
footer, 
section, 
nav {
border:1px solid orange;
padding:3px;
margin:3px;
width:50%;
}
section {
background:#FDF7D3;
}
</style>
<header>Header...</header>
<nav>Nav...</nav>
<article>
Article content...
</article>
<section>
Company intro...
</section>
<section>
News items...
</section>
<footer>Footer...
<section>
Contact info...
</section>
</footer>

Multiple Articles within a Section

Here's a quick example of multiple <article> elements within a <section> element.

xxxxxxxxxx
 
<section>
    <h1>Planets</h1>
    <p>Hope you enjoy these articles on some of the more 
        popular planets within the Homo sapien community.</p>
    <article>
        <h2>Earth</h2>
        <p>Planet Earth is on average, 93 million miles away from Sun. 
            It orbits Sun at an average 18.5 miles per second.</p>
    </article>
    <article>
        <h2>Mars</h2>
        <p>Mars is on average, 142 million miles away from Sun. 
            It orbits Sun at an average 14.5 miles per second.</p>
    </article>
</section>

Blog Comments

One application of the <section> tag could be to present blog comments at the end of an article. Like this:

xxxxxxxxxx
 
<article>
    <h1>Mars</h1>
    <p>Mars is on average, 142 million miles away from Sun. 
        It orbits Sun at an average 14.5 miles per second.</p>
    <section>
    <h2>User Comments</h2>
    <article>
    <header>
        <h3>SolarFlare says:</h3>
        <p><time datetime="2014-06-05T22:43-08:00">3 hours ago</time></p>
    </header>
        <p>Wow, this info really brings me back down to Earth!</p>
    </article>
    <article>
    <header>
        <h3>Pluto says:</h3>
        <p><time datetime="2014-06-05T23:45-08:00">2 hours ago</time></p>
    </header>
        <p>142 million miles... pfft.. that's nothing!</p>
    </article>
    </section>
</article>

Here's what the above example might look like after applying some basic styles.

xxxxxxxxxx
 
<!DOCTYPE html>
<title>Example</title>
<style>
article {
background:#ccc;
padding:10px;
}
article article {
background:#fff;
margin-bottom:1px;
} 
</style>
<article>
    <h1>Mars</h1>
    <p>Mars is on average, 142 million miles away from Sun. 
        It orbits Sun at an average 14.5 miles per second.</p>
    <section>
    <h2>User Comments</h2>
    <article>
    <header>
        <h3>SolarFlare says:</h3>
        <p><time datetime="2014-06-05T22:43-08:00">3 hours ago</time></p>
    </header>
        <p>Wow, this info really brings me back down to Earth!</p>
    </article>
    <article>
    <header>
        <h3>Pluto says:</h3>
        <p><time datetime="2014-06-05T23:45-08:00">2 hours ago</time></p>
    </header>
        <p>142 million miles... pfft.. that's nothing!</p>
    </article>
    </section>
</article>

Article Sections

An <article> element can be separated into sections using the <section> element. This would represent different thematic sections within the article.

In the following example, the <article> element represents a book. This book has a title, an intro, three chapters, and an appendix. The <section> element is used to separate the intro, each chapter, and the appendix.

xxxxxxxxxx
 
<article>
    <header>
    <h1>Article/book Title...</h1>
    <p>Text...</p>
    </header>
    <section>
        <h2>Introduction</h2>
        <p>Content....</p>
    </section>
    <section>
        <h2>Chapter 1</h2>
        <p>Content...</p>
    </section>
    <section>
        <h2>Chapter 2</h2>
        <p>Content...</p>
    </section>
    <section>
        <h2>Chapter 3</h2>
        <p>Content...</p>
    </section>
    <section>
        <h2>Appendix</h2>
        <p>Content...</p>
    </section>
</article>

Here's a visual representation of the above code:

xxxxxxxxxx
 
<!DOCTYPE html>
<title>Example</title>
<style>
header, 
article, 
section {
border:1px solid orange;
padding:3px;
margin:3px;
width:90%;
}
section {
background:#FDF7D3;
}
</style>
<article>
<header>
<h1>Article/book Title...</h1>
<p>Text...</p>
</header>
<section>
<h2>Introduction</h2>
<p>Content....</p>
</section>
<section>
<h2>Chapter 1</h2>
<p>Content...</p>
</section>
<section>
<h2>Chapter 2</h2>
<p>Content...</p>
</section>
<section>
<h2>Chapter 3</h2>
<p>Content...</p>
</section>
<section>
<h2>Appendix</h2>
<p>Content...</p>
</section>
</article>

<section> vs <article>

You can nest <section> tags inside <article> tags, and you can nest <article> tags inside <section> tags.

Which one should you use?

There's a subtle difference between the <section> element and the <article> element. The purpose of the <section> element is to represent a generic section of a document or application. The <article> element on the other hand, represents a single, self-contained piece of content.

When choosing whether to use a <section> tag or an <article> tag, use the <article> tag if the contents would retain its meaning if syndicated.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <section> element accepts the following attributes.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <section> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.