← HTML & CSS

Content sectioning (section, article, aside)

A semantic HTML element for self-contained content that could stand alone, such as a blog post, news story, or forum entry.

Part of: HTML and CSS Journey — Module 23

Understanding Content sectioning (section, article, aside) in HTML & CSS

What it does: The product announcement is self-contained - it could be shared or syndicated independently. That is the defining quality of <article>. Related article links supplement the main content without being essential to it - a perfect use of <aside>. <section> is the semantic choice for thematic groupings. <div> is a generic container with no semantic meaning. <section> should generally start with an h2-h6 heading to label its topic. A section without a heading may be better served by a <div>. HTML tag names must be lowercase. <ARTICLE> is non-standard - use <article>. Nesting is common and correct - a <section> might group multiple <article> elements, such as a blog section containing several posts.

Common mistakes: HTML tag names must be lowercase. <SECTION> should be written as <section>. The article opening tag appears twice. The second one should be the content - or the closing tag is missing a forward slash: </article>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Content sectioning (section, article, aside) to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 1–23) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which element groups thematically related content under a heading?

Matches

<SECTION> <h2>Topic</h2> </SECTION>

↓

Tag names must be lowercase - <SECTION> and </SECTION> should be <section> and </section>

Applying

Meanings

Term

Meaning

A semantic HTML element for self-contained content that could stand alone, such as a blog post, news story, or forum entry.

Practice

<main>

Testing

Gaps

Check Answer

Spots

1<SECTION>

2 <h2>About Us</h2>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which element groups thematically related content under a heading?

A. <section> ✓

B. <div>

<section> is the semantic choice for thematic groupings. <div> is a generic container with no semantic meaning.

2. Which element marks a self-contained piece of content like a blog post?

A. <article> ✓

B. <section>

<article> is for content that makes sense on its own - a blog post, news story, or product card. <section> is for related grouped content.

3. What is <aside> used for?

A. The page sidebar that always appears on the left

B. Supplementary content related to but not essential to the main content ✓

<aside> is for tangentially related content like related links, pull quotes, or glossary terms. It is not tied to any specific visual position.

4. True or false: <section> elements should typically contain a heading.

A. True ✓

B. False

<section> should generally start with an h2-h6 heading to label its topic. A section without a heading may be better served by a <div>.

5. True or false: <ARTICLE> with capital letters is valid HTML.

A. True

B. False ✓

HTML tag names must be lowercase. <ARTICLE> is non-standard - use <article>.

Match the Pairs

<section> <h2>Sports</h2> <p>Latest sport news.</p> </section> → Groups thematically related content under a heading - the Sports topic has its own semantic section

<article> <h3>Match report</h3> <p>Team A won.</p> </article> → A self-contained piece of content - this match report could be syndicated or read independently of the surrounding page

<article> is for self-contained content that could stand alone, like a blog post or news story → <article> <h2>New product launch</h2> <p>Details here.</p> </article>

<aside> holds supplementary content related to but not essential to the surrounding content → <aside> <h3>Related articles</h3> <a href="more.html">Read more</a> </aside>

<SECTION> <h2>Topic</h2> </SECTION> → Tag names must be lowercase - <SECTION> and </SECTION> should be <section> and </section>

<aside>Main article content goes here.</aside> → <aside> is for supplementary content, not primary content - use <article> or <section> for main content

Key Term

<article>

A semantic HTML element for self-contained content that could stand alone, such as a blog post, news story, or forum entry.

Fill in the Blanks

1. <section> <h2>Blog</h2> <p>Posts here.</p> </section>

Hint: Type the semantic element that groups thematically related content

2. <article> <h2>My Post</h2> <p>Post content.</p> </article>

Hint: Type the semantic element for a self-contained piece of content like a blog post

3. <aside> <h3>Related links</h3> <p>See also.</p> </aside>

Hint: Type the semantic element for supplementary content beside the main flow

4. <section id="news"> <h2>Latest</h2> </section>

Hint: Type the element name for the closing tag of this content section

5. <section> <article> <p>Post.</p> </article> </section>

Hint: Type the semantic element for a self-contained post nested inside the section

Spot the Error

Question 1

A <SECTION>

B <h2>About Us</h2>

C <p>Our story.</p>

D </section>

Line A — HTML tag names must be lowercase. <SECTION> should be written as <section>.

Question 2

A <main>

B <article><article>

C <p>Blog post.</p>

D </article>

E </main>

Line B — The article opening tag appears twice. The second one should be the content - or the closing tag is missing a forward slash: </article>.

Question 3

A <main>

B <section>

C <ASIDE>Related links.</ASIDE>

D </section>

E </main>

Line C — HTML tag names must be lowercase. <ASIDE> and </ASIDE> should be written as <aside> and </aside>.

Question 4

A <main>

B <section id="news">

C <h2>Latest</h2>

D <article class news>

E <p>Story here.</p>

F </article>

Line D — The class attribute value must be in double quotes. class news (without quotes) is invalid - write class="news".

Question 5

A <main>

B <section>

C <h2>Topics</h2>

D <p>Introduction.</p>

E <aside class=note>

F </section>

Line E — The aside attribute value must be in double quotes: class="note". class=note without quotes is invalid HTML.

Student with a class code? Join your class →