Content sectioning (section, article, aside)

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A <section>

B <div>

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

A <article>

B <section>

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

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

A True

B False

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

A True

B False

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<section> <h2>Sports</h2> <p>Latest sport news.</p> </section>		AA self-contained piece of content - this match report could be syndicated or read independently of the surrounding page
2<article> <h3>Match report</h3> <p>Team A won.</p> </article>		B<aside> <h3>Related articles</h3> <a href="more.html">Read more</a> </aside>
3<article> is for self-contained content that could stand alone, like a blog post or news story		CTag names must be lowercase - <SECTION> and </SECTION> should be <section> and </section>
4<aside> holds supplementary content related to but not essential to the surrounding content		D<article> <h2>New product launch</h2> <p>Details here.</p> </article>
5<SECTION> <h2>Topic</h2> </SECTION>		E<aside> is for supplementary content, not primary content - use <article> or <section> for main content
6<aside>Main article content goes here.</aside>		FGroups thematically related content under a heading - the Sports topic has its own semantic section

Definitions

Fill in the Blanks

Complete each line of code by filling in the missing parts.

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

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

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

<section id="news"> <h2>Latest</h2> </___>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <SECTION>

B <h2>About Us</h2>

C <p>Our story.</p>

D </section>

Question 2

A <main>

B <article><article>

C <p>Blog post.</p>

D </article>

E </main>

Question 3

A <main>

B <section>

C <ASIDE>Related links.</ASIDE>

D </section>

E </main>

Question 4

A <main>

B <section id="news">

C <h2>Latest</h2>

D <article class news>

E <p>Story here.</p>

F </article>

Question 5

A <main>

B <section>

C <h2>Topics</h2>

D <p>Introduction.</p>

E <aside class=note>

F </section>

Answer Key

Content sectioning (section, article, aside)

Section A: Quick Questions

A — <section>

A — <article>

B — Supplementary content related to but not essential to the main content

A — True

B — False

Section B: 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

Section C: Definitions

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

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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

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

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

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

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