BitWithBite
HTML Worksheet
🌐 Semantic HTML
SCORE___ / 20
NameClassDate
After this worksheet you can
Prefer meaning-rich tags over divKnow main semantic elementsBenefits for SEO and accessibilityLandmark navigation📚 Quick Recap
You could build an entire website using only <div> and <span>. Browsers would render it fine. But screen readers would see an unintelligible wall of boxes, search engines would struggle to identify what's important, and your team would have to read every CSS class name to understand the document structure. Semantic HTML fixes all three — for free.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Semantic HTML describes:
2Which is semantic?
3Screen readers benefit because tags provide:
4A div is appropriate when:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5header, nav, main, article, section, aside, are the big seven.
6Search engines rank structure better.
7Replace: div id=header, div id=nav with semantic tags.
8Two concrete SEO/a11y wins of semantics?
9When is div still fine?
🚀 Section C · Challenge ● CHALLENGE 5
10Sketch a semantic page skeleton.
💭 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-A 2-B 3-A 4-A | 5 footer 6 semantic/clear 7 = <header> and <nav> 8 = Better rankings/snippets; screen-reader landmark jumps 9 = Styling/layout wrappers with no meaning | 10 = header + nav + main (article/section + aside) + footer