🏗️ Semantic HTML5

Chapter: HTML5 Foundations · Level ★★☆ · Time: 15 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Use header/nav/main/footerDistinguish section vs articleUse aside correctlyStructure a full page semantically

📚 Quick Recap

🎯 What you'll practice: The core HTML5 semantic elements and when to use each one.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5Closing information like copyright belongs in <>.

6A thematic grouping of related content uses <>.

7List the six main semantic elements covered in this lesson.

8What's the difference between <section> and <article>?

9Why do search engines and screen readers benefit from semantic tags over generic <div>s?

🚀 Section C · Challenge ● CHALLENGE 5

10Sketch the semantic tag structure (tag names only, nested) for a blog homepage with a nav bar, three post previews, a sidebar of recent tags, and a footer.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-B 2-B 3-A 4-C | 5 = footer 6 = section 7 = header, nav, main, section, article, aside, footer (any six) 8 = section groups related content thematically (often with a heading); article is self-contained content that could stand alone/be syndicated, like a blog post 9 = Semantic tags convey the meaning/role of content programmatically, letting screen readers announce structure and search engines weight content correctly — a <div> carries no such meaning | 10 = header>nav, main>section>article(x3), aside, footer — the three post previews as articles inside a section within main, with aside as a sibling of section holding tags, and footer outside main.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5