This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <section> element

The <section> element represents a thematic grouping of content. It is used when a part of a page has its own topic and belongs in the document's structure.

A section is usually introduced by a heading. That heading tells the reader what the section is about. If there is no natural heading, the author should question whether <section> is really the right element.

This element is not a generic wrapper. If the author only needs a box for styling, scripting, or layout, <div> is usually better. A section should mean something in the structure of the document.

The difference between <section> and <article> is the kind of grouping they describe. A section brings content together under a topic. An article is a self-contained composition that could sensibly be reused or distributed on its own.

For example, a long guide might have sections called Introduction, Examples, and Common mistakes. Each section belongs to the guide; it is not necessarily a separate article.

The nesting can work both ways. An article can contain sections, as the guide below does. A section headed Reader reviews could contain several articles, one for each independent review. Choose the element according to what the content represents, rather than a fixed order of containers.

Attributes: GLOBALS.

Typical layout:
<article>
  <h1>Learning CSS layout</h1>

  <section>
    <h2>Flexbox</h2>
    <p>Flexbox handles one-dimensional layout.</p>
  </section>

  <section>
    <h2>Grid</h2>
    <p>Grid handles two-dimensional layout.</p>
  </section>
</article>

Visual representation:

Learning CSS layout

Flexbox

Flexbox handles one-dimensional layout.

Grid

Grid handles two-dimensional layout.