← Semantic tags lesson New set →

HTML Worksheet: Semantic Tags

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

Answer key

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

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