← Semantic tags lesson New set →

HTML Worksheet: Semantic Tags

HTML and CSS lesson 23: Semantic tags · Set 173 · 40 questions
TalentJR

Code tip (Say what it is): Top to bottom: <header> → <nav> → <main> → <footer>. <article> = a post or story; <aside> = a side box of extra notes. <div> and <span> are not semantic — they say nothing about meaning.

NameDateTime takenScore ___ / 40
  1. 1.True or false: <main> holds the main content. (a) False (b) True
  2. 2.Which of these is true of <main>? (a) sits at the bottom (b) holds extra side notes (c) holds the main content (d) holds the menu of links
  3. 3.True or false: <article> holds the logo and title. (a) False (b) True
  4. 4.🧭 Is <div> semantic or not semantic? (a) semantic (b) not semantic
  5. 5.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it adds pictures (c) it loads faster (d) it tells its meaning
  6. 6.True or false: <aside> holds extra side notes. (a) False (b) True
  7. 7.Which of these is true of <article>? (a) holds the menu of links (b) holds the main content (c) holds a side box of tips (d) holds a news story
  8. 8.True or false: <main> sits at the very top. (a) False (b) True
  9. 9.🧭 How many <main> parts should a page have? (a) three (b) none (c) one (d) ten
  10. 10.🧭 Is <article> semantic or not semantic? (a) semantic (b) not semantic
  11. 11.Which of these is true of <nav>? (a) sits at the very top (b) holds a side box of tips (c) is the page’s key part (d) helps you move around
  12. 12.🧭 Which semantic tag holds the logo and title? (a) <article> (b) <nav> (c) <header> (d) <main>
  13. 13.Which of these is true of <main>? (a) holds extra side notes (b) holds the menu of links (c) is the page’s key part (d) sits at the very top
  14. 14.🧭 Is <aside> semantic or not semantic? (a) semantic (b) not semantic
  15. 15.🔢 On a typical page, from top to bottom, which comes LAST? (a) <footer> (b) <header> (c) <nav> (d) <main>
  16. 16.Which of these is true of <nav>? (a) holds the menu of links (b) holds the logo and title (c) sits at the very top (d) holds a side box of tips
  17. 17.🧭 Who is helped most by semantic tags? (a) only the printer (b) screen-reader users (c) only the server (d) nobody
  18. 18.🧭 Which semantic tag holds one blog post? (a) <nav> (b) <aside> (c) <article> (d) <footer>
  19. 19.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<nav>”? (a) <main> (b) <nav>
  20. 20.Which of these is true of <aside>? (a) helps you move around (b) holds the menu of links (c) holds extra side notes (d) sits at the very top
  21. 21.Which of these is true of <aside>? (a) helps you move around (b) holds the menu of links (c) holds a side box of tips (d) sits at the very top
  22. 22.🧭 Which semantic tag sits at the bottom? (a) <nav> (b) <main> (c) <footer> (d) <article>
  23. 23.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
  24. 24.🧭 Which semantic tag holds the menu of links? (a) <footer> (b) <nav> (c) <header> (d) <aside>
  25. 25.🧭 Which semantic tag helps you move around? (a) <header> (b) <nav> (c) <footer> (d) <article>
  26. 26.🧭 Which semantic tag holds the main content? (a) <nav> (b) <header> (c) <article> (d) <main>
  27. 27.🧭 Which semantic tag holds a news story? (a) <article> (b) <header> (c) <footer> (d) <aside>
  28. 28.🔢 On a typical page, from top to bottom, which comes first: “<footer>” or “<header>”? (a) <footer> (b) <header>
  29. 29.🧭 Which semantic tag sits at the very top? (a) <article> (b) <header> (c) <aside> (d) <nav>
  30. 30.True or false: <header> holds a side box of tips. (a) False (b) True
  31. 31.Which of these is true of <article>? (a) holds one blog post (b) helps you move around (c) sits at the very top (d) is the page’s key part
  32. 32.🧭 Is <header> semantic or not semantic? (a) semantic (b) not semantic
  33. 33.🔢 On a typical page, from top to bottom, which comes first: “<nav>” or “<footer>”? (a) <nav> (b) <footer>
  34. 34.🧭 Is <footer> semantic or not semantic? (a) not semantic (b) semantic
  35. 35.Which of these is true of <header>? (a) helps you move around (b) holds one blog post (c) holds a side box of tips (d) sits at the very top
  36. 36.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
  37. 37.True or false: <article> helps you move around. (a) True (b) False
  38. 38.True or false: <header> sits at the very top. (a) True (b) False
  39. 39.True or false: <article> holds one blog post. (a) True (b) False
  40. 40.True or false: <header> holds the main content. (a) True (b) False

Answer key

  1. True
  2. holds the main content
  3. False
  4. not semantic
  5. it tells its meaning
  6. True
  7. holds a news story
  8. False
  9. one
  10. semantic
  11. helps you move around
  12. <header>
  13. is the page’s key part
  14. semantic
  15. <footer>
  16. holds the menu of links
  17. screen-reader users
  18. <article>
  19. <nav>
  20. holds extra side notes
  21. holds a side box of tips
  22. <footer>
  23. not semantic
  24. <nav>
  25. <nav>
  26. <main>
  27. <article>
  28. <header>
  29. <header>
  30. False
  31. holds one blog post
  32. semantic
  33. <nav>
  34. semantic
  35. sits at the very top
  36. semantic
  37. False
  38. True
  39. True
  40. False

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids