Defining Sections in HTML5

Sep 16, 2015

HTML5

All content lying inside the <body> element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the <body> element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, and <nav> tags.

Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>. See Defining Headings in HTML5.

Example:

<section>
  <h1>Forest elephants</h1>
  <section>
    <h1>Introduction</h1>
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>
  <section>
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>
  <aside>
    <p>advertising block</p>
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company</p>
</footer>

This HTML snippet defines a top-level section:

<section>
  <h1>Forest elephants</h1>
  <section>
    <h1>Introduction</h1>
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>
  <section>
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>
  <aside>
    <p>advertising block</p>
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company</p>
</footer>

This section has three subsections:

<section>
  <h1>Forest elephants</h1>

  <section>
    <h1>Introduction</h1>
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>

  <section>
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>

  <aside>
    <p>advertising block</p>
  </aside>
</section>

<footer>
  <p>(c) 2010 The Example company</p>
</footer>

This leads to the following outline:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

source article: Defining Sections in HTML5

tutorial
→ ←