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.