The <section> element contains stand-alone text or content.
Of all semantic tags, <section> is the closest to a <div>.
Sections can be made identifyable with a heading (<h1>-<h6>).
A <section> with a story about the The Night Watch, Rembrandt's most famous painting.
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>
The <section> tag serves as a stand-alone area when
there's no other, more specific semantic tag (see below for more on semantic tags).
A page section can be a header, footer, navigation, chapters, etc.
The <section> tag also groups elements for ease of maintainance.
A <section> with an article about the Night Watch painting, including an image.
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>
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.
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, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
| 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 possible, use semantic tags, like <section>, instead of the
generic <div>.
They behave the same, but specify their content better.
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 |
