🎓 A1Learner
🔍

HTML Section and Aside

The section element holds one part of a page about a single theme. The aside element holds content set apart from the main flow.

One section

The section element groups one theme. Its heading names that theme.

<section>
  <h2>Vegetables</h2>
  <p>Carrots and beans grow in this bed.</p>
</section>

Two sections, two themes

Each section holds one theme. The headings keep the themes apart.

<section>
  <h2>Vegetables</h2>
  <p>Carrots and beans grow in this bed.</p>
</section>
<section>
  <h2>Flowers</h2>
  <p>Sunflowers line the fence.</p>
</section>

An aside beside the main text

The aside element holds a side note. The note sits apart from the main text.

<main>
  <p>Carrots and beans grow in this bed.</p>
  <aside>
    <p>Tip: water the bed in the morning.</p>
  </aside>
</main>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>School Garden</title>
</head>
<body>
<h1>School Garden</h1>
<main>
  <section>
    <h2>Vegetables</h2>
    <p>Carrots and beans grow in this bed.</p>
  </section>
  <section>
    <h2>Flowers</h2>
    <p>Sunflowers line the fence.</p>
  </section>
  <aside>
    <p>Tip: water the beds in the morning.</p>
  </aside>
</main>
</body>
</html>

Key points

  • section: one part of a page about a single theme
  • aside: content set apart from the main flow
  • A section normally starts with its own heading
  • Use aside for a side note or an extra fact

In this example, the main element holds the garden content. Two section elements hold two themes, vegetables and flowers. Each section has its own heading. The aside element holds a watering tip set apart from the main text.

Note

Use div for a group with no theme to name.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element holds one part of a page about a single theme?