HTML <section> Tag

The <section> tag displays an area with stand-alone text or content. Sections generally start with an identifying heading (<h1>-<h6>).

HTML Tag

Example

#

A <section> tag.
It has a story about the The Night Watch; Rembrandt's most famous painting.

The Night Watch

The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.

<section>
  <h1>The Night Watch</h1>
  <p>The Night Watch (Dutch: De Nachtwacht), is a 1642 
     painting by Rembrandt van Rijn. It is in the collection 
     of the Amsterdam Museum but is prominently displayed 
     in the Rijksmuseum (State Museum) as the best-known 
     painting in its collection. The Night Watch is 
     the most famous Dutch Golden Age painting.
  </p>
</section>

Using <section>

The <section> tag serves as a stand-alone area when there's no other, more specific semantic tag.

A page section can be a header, footer, navigation, chapters, or something else.

The <section> tag also groups elements to more easily locate and maintain them.

Of all semantic tags, the <section> is the closest to a <div> (see below for more on semantic tags).

Generally, sections should be made identifyable by starting with a heading (<h1>-<h6>).

More Examples

A <section> with an article about the Night Watch painting, including an image.

The Night Watch

The painting is famous for three things: its colossal size (363 cm × 437 cm (11.91 ft × 14.34 ft)), the dramatic use of light and shadow (tenebrism), and the perception of motion in what would have traditionally been a static military group portrait.

The painting was completed in 1642, at the peak of the Dutch Golden Age. It depicts the eponymous company moving out, led by Captain Frans Banninck Cocq (dressed in black, with a red sash) and his lieutenant, Willem van Ruytenburch (dressed in yellow, with a white sash).

With effective use of sunlight and shade, Rembrandt leads the eye to the three most important characters among the crowd: the two men in the center (from whom the painting gets its original title), and the woman in the centre-left background carrying a chicken. Behind them, the company's colors are carried by the ensign, Jan Visscher Cornelissen. The figures are almost life-size.

<section>
  <h1>The Night Watch</h1>
  <p>
     The painting is famous for three things: its 
     colossal size (363 cm × 437 cm (11.91 ft × 14.34 ft)), 
     the dramatic use of light and shadow (tenebrism),
     and the perception of motion in what would have 
     traditionally been a static military group portrait. 
  </p>
  <img src="/img/html/nightwatch.jpg" class="img-fluid">
  <p>
     The painting was completed in 1642, at the peak of 
     the Dutch Golden Age. It depicts the eponymous company 
     moving out, led by Captain Frans Banninck Cocq 
     (dressed in black, with a red sash) and his lieutenant, 
     Willem van Ruytenburch (dressed in yellow, with a white 
     sash). 
  </p>
  <p>
     With effective use of sunlight and shade, 
     Rembrandt leads the eye to the three most important 
     characters among the crowd: the two men in the center 
     (from whom the painting gets its original title), and 
     the woman in the centre-left background carrying a chicken. 
     Behind them, the company's colors are carried by the ensign, 
     Jan Visscher Cornelissen. The figures are almost life-size.
  </p>
</section>

Attributes for <section>

The <section> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the section element with a unique identifier.
class    classnames Assigns one or more classnames to the section element.
style    CSS-values Assigns CSS style values to the section element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the section element is hidden.

For other global attributes see our global attributes list.


Layout Tags

The <section> tag is part of a group of semantic tags that help with creating the layout of web pages. This group is referred to as the Layout tag group. Together, these tags allow you to create comprehensive page layouts.

An example layout and a list of layout tags below.

HTML Layout
Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page

Note: Layout tags define areas on a page that contain content. By default they have no visual appearance, but are often styled -- for example with a border or background color.

Tip: When appropriate, use semantic tags instead of the generic <div>.

Browser support

Here is when <section> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides