Sectioning rules

Learn to build the correct hierarchy of semantic sections.

Document outline

A page's document outline is the content map built by its headings. Screen readers use this map to 'navigate by heading'. The cleaner the outline, the easier the page is to move through.

The outline rests on ordered heading levels: <h1> for the main title, <h2> for major sections, <h3> for sub-sections. Skipping levels (say from h1 to h4) breaks the outline and confuses screen-reader users.

Heading hierarchy

Heading levels are like a nested staircase. <h1> is the page's main title, usually just one. <h2> marks major sections, <h3> their sub-headings. Each step down goes one level deeper.

An example magazine outline: <h1>Cheese Magazine</h1> at the top, then <h2>This week</h2>, and under it <h3>Ezine cheese</h3>. The order stays both visual and meaningful.

When to pick section

A few hints for picking <section>. If the content can stand alone as a post, pick <article>; if it only gathers a theme, pick <section>. Names like 'Comments', 'Related posts', 'News' fit a section well.

Put a heading inside each section. This keeps the document outline sound. Take the heading level one step below the parent: if the main content is <h2>, a sub-part inside can be <h3>.

Exercise section and two articles inside main

Add a <main> to body. Inside main put a <section>; inside the section put an <h2> (text News). Inside the section put two <article>; inside each article put an <h3> (first text This week, second text Last week) and a <p> (non-empty). All headings must be non-empty.

Show example solution

<body>
  <main>
    <section>
      <h2>News</h2>
      <article>
        <h3>This week</h3>
        <p>This week's post...</p>
      </article>
      <article>
        <h3>Last week</h3>
        <p>Last week's post...</p>
      </article>
    </section>
  </main>
</body>

Test yourself

What is the best opening for a <section>?
- A <p> paragraph
- An <h2> heading
- An <li> item
- An <a> link
Show answer

An <h2> heading — Correct. A section gathers a theme, so it carries a heading.

Complete the section heading

<section>
  <____>News</h2>
  <p>Latest posts...</p>
</section>

Show answer

<section>
  <h2>News</h2>
  <p>Latest posts...</p>
</section>

Match heading and section tags

h1

Main title
h2

Section heading
h3

Sub-section heading
section

Theme section
How many <h1> tags are recommended on a page?
- Unlimited
- Two
- Three
- One
Show answer

One — Correct. One main title (h1) keeps the document outline clear.

Next lesson: Summary - Magazine page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies