and <meta> tags"}],"correctOptionId":"B","explanation":"<main> represents the primary content of the document's <body>. It should not include content repeated across pages (like global navigation, sidebars, or footers).\n"},{"id":"q3","title":"Semantic HTML benefits","description":"Which pair best describes widely accepted benefits of semantic HTML?\n","difficulty":"Beginner","options":[{"id":"A","text":"Faster JavaScript execution and smaller images"},{"id":"B","text":"Improved SEO understanding and better accessibility for assistive technologies"},{"id":"C","text":"Automatic CSS layout and reduced network latency"},{"id":"D","text":"Built-in authentication and stronger encryption"}],"correctOptionId":"B","explanation":"Semantic elements provide meaningful structure that search engines can interpret and that assistive technologies (like screen readers) can use to offer landmark navigation and clearer context.\n"},{"id":"q4","title":"header vs footer usage","description":"Which statement about <header> and <footer> is correct?\n","difficulty":"Intermediate","options":[{"id":"A","text":"<header> and <footer> can only appear once per page and must be direct children of <body>."},{"id":"B","text":"<header> and <footer> are only valid inside <main>."},{"id":"C","text":"<header> and <footer> can be used multiple times, including within <article> or <section>."},{"id":"D","text":"<footer> must contain contact information to be valid HTML."}],"correctOptionId":"C","explanation":"<header> and <footer> can appear multiple times. For example, an <article> can have its own header (title, byline) and footer (tags, related links), in addition to any site-wide header/footer.\n"},{"id":"q5","title":"section vs article","description":"You have a blog index page that lists multiple posts. Each post entry includes a title, author, date, and a summary that could be syndicated (e.g., in RSS). Which is the best semantic wrapper for each post entry?\n","difficulty":"Intermediate","options":[{"id":"A","text":"<section>"},{"id":"B","text":"<article>"},{"id":"C","text":"<aside>"},{"id":"D","text":"<nav>"}],"correctOptionId":"B","explanation":"<article> is for self-contained, independently reusable content (like a blog post or news item). A list of posts on an index page typically contains multiple <article> elements.\n"},{"id":"q6","title":"Pick the best semantic structure","description":"Which option best uses semantic elements for a page with:\n- a site-wide header\n- a primary navigation menu\n- a main content area containing one blog post\n- a sidebar with related links\n- a site-wide footer\n","difficulty":"Intermediate","options":[{"id":"A","text":"```html\n<header>\n <nav>...</nav>\n</header>\n<main>\n <article>...</article>\n <aside>...</aside>\n</main>\n<footer>...</footer>\n```\n"},{"id":"B","text":"```html\n<main>\n <header>...</header>\n <footer>...</footer>\n <nav>...</nav>\n <article>...</article>\n <aside>...</aside>\n</main>\n```\n"},{"id":"C","text":"```html\n<header>...</header>\n<section>...</section>\n<section>...</section>\n<footer>\n <main>...</main>\n</footer>\n```\n"},{"id":"D","text":"```html\n<nav>\n <header>...</header>\n</nav>\n<article>\n <main>...</main>\n</article>\n<aside>\n <footer>...</footer>\n</aside>\n```\n"}],"correctOptionId":"A","explanation":"Option A matches common semantic layout: <header> for the page header (often containing <nav>), <main> for the primary content, <article> for the blog post, <aside> for complementary sidebar content, and <footer> for the page footer.\n"},{"id":"q7","title":"Landmark navigation and duplication","description":"Consider the following HTML:\n\n```html\n<body>\n <header>\n <nav aria-label=\"Primary\">...</nav>\n </header>\n\n <main>\n <nav aria-label=\"On this page\">...</nav>\n <article>...</article>\n </main>\n\n <footer>...</footer>\n</body>\n```\n\nWhich statement is most accurate regarding accessibility?\n","difficulty":"Advanced","options":[{"id":"A","text":"Having two <nav> elements is invalid HTML and will break screen readers."},{"id":"B","text":"Multiple <nav> landmarks are allowed; adding distinct accessible names (e.g., aria-label) helps users differentiate them."},{"id":"C","text":"Only the first <nav> will be recognized as a landmark; the second is ignored."},{"id":"D","text":"The <nav> inside <main> must be replaced with <aside> to remain semantic."}],"correctOptionId":"B","explanation":"Multiple navigation regions are valid and common (global navigation plus in-page navigation). Providing unique accessible names (via aria-label or an associated heading) helps assistive tech users select the right navigation landmark.\n"},{"id":"q8","title":"When not to use section","description":"You want to group elements purely for styling/layout with no meaningful document outline or thematic grouping. Which is the best choice?\n","difficulty":"Advanced","options":[{"id":"A","text":"Use <section> because it is the generic container for everything."},{"id":"B","text":"Use <article> because any grouped content is an article."},{"id":"C","text":"Use <div> because it has no semantic meaning and is appropriate for purely presentational grouping."},{"id":"D","text":"Use <main> because it's the primary container for layout."}],"correctOptionId":"C","explanation":"<section> and <article> imply semantic meaning. If the grouping is only for CSS layout with no distinct topic/region, <div> is the correct choice to avoid adding misleading semantics.\n"},{"id":"q9","title":"Choosing the right element for complementary content","description":"In a documentation page, you have a block titled \"Tip\" that is helpful but not essential to understanding the main instructions. Where does it most semantically belong?\n","difficulty":"Advanced","options":[{"id":"A","text":"Inside <aside>, because it is tangential/complementary to the main content."},{"id":"B","text":"Inside <nav>, because it helps users navigate the content."},{"id":"C","text":"Inside <header>, because tips are introductory."},{"id":"D","text":"Inside <footer>, because it appears after the instructions."}],"correctOptionId":"A","explanation":"<aside> represents content indirectly related to the main content—like callouts, tips, pull quotes, or related resources. A \"Tip\" box is a classic <aside> use when it’s supplementary.\n"},{"id":"q10","title":"SEO + accessibility: pick the best refactor","description":"You are refactoring a page built with generic containers:\n\n```html\n<div class=\"top\">\n <div class=\"menu\">...</div>\n</div>\n\n<div class=\"content\">\n <div class=\"post\">\n <div class=\"post-title\">Title</div>\n <div class=\"post-body\">...</div>\n </div>\n</div>\n\n<div class=\"bottom\">...</div>\n```\n\nWhich refactor most improves semantics for both SEO and accessibility while keeping the structure accurate?\n","difficulty":"Advanced","options":[{"id":"A","text":"```html\n<header class=\"top\">\n <nav class=\"menu\">...</nav>\n</header>\n\n<main class=\"content\">\n <article class=\"post\">\n <h1 class=\"post-title\">Title</h1>\n <div class=\"post-body\">...</div>\n </article>\n</main>\n\n<footer class=\"bottom\">...</footer>\n```\n"},{"id":"B","text":"```html\n<section class=\"top\">\n <section class=\"menu\">...</section>\n</section>\n\n<section class=\"content\">\n <section class=\"post\">\n <div class=\"post-title\">Title</div>\n <div class=\"post-body\">...</div>\n </section>\n</section>\n\n<section class=\"bottom\">...</section>\n```\n"},{"id":"C","text":"```html\n<main class=\"top\">\n <header class=\"menu\">...</header>\n</main>\n\n<article class=\"content\">\n <section class=\"post\">\n <h6 class=\"post-title\">Title</h6>\n <div class=\"post-body\">...</div>\n </section>\n</article>\n\n<footer class=\"bottom\">...</footer>\n```\n"},{"id":"D","text":"```html\n<header class=\"top\">\n <div class=\"menu\" role=\"navigation\">...</div>\n</header>\n\n<div class=\"content\" role=\"main\">\n <div class=\"post\">\n <div class=\"post-title\">Title</div>\n <div class=\"post-body\">...</div>\n </div>\n</div>\n\n<div class=\"bottom\" role=\"contentinfo\">...</div>\n```\n"}],"correctOptionId":"A","explanation":"Option A uses native semantic elements (<header>, <nav>, <main>, <article>, <footer>) which create meaningful landmarks for assistive technologies and clearer structure for crawlers. It also upgrades the title to a real heading (<h1>), improving document structure and discoverability. Roles can help when semantics aren’t available, but native elements are preferred when they accurately describe the content.\n"}]}]]}]}] </article></body></html>

22:["$","div",null,{"id":"$undefined","className":"mx-auto w-full max-w-7xl px-4 max-sm:px-0 sm:px-6 lg:px-12 mt-20 min-h-[calc(100vh-64px)] flex-1 bg-[#F8FAFC] dark:bg-[var(--background)]","children":["$","div",null,{"className":"relative mx-auto max-w-5xl px-8 py-12 max-sm:px-2 max-sm:py-8","children":[["$","$L3f",null,{"category":"html","topic":"semantic-html","segments":"$Q40","totalQuestions":10,"title":"Semantic HTML Quiz: Test Your Knowledge of header, nav, main, article, section, aside, and footer"}],["$","$L41",null,{"questions":[{"id":"q1","title":"Choose the semantic element","description":"Which HTML element is specifically intended to contain a site's primary navigation links?\n","difficulty":"Beginner","options":[{"id":"A","text":"

"},{"id":"B","text":"

"},{"id":"C","text":"

"},{"id":"D","text":"

Ready to Level Up?

Choose the semantic element

Ready to Level Up?

Choose the semantic element