← Semantic tags lesson New set →

HTML Worksheet: Semantic Tags

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

Answer key

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

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