← Semantic tags lesson New set →

HTML Worksheet: Semantic Tags

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

Answer key

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

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