← Semantic tags lesson New set →

HTML Worksheet: Semantic Tags

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

Answer key

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

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