Test your knowledge of semantic HTML elements with quizzes and best-practice tips.
Click begin to start the HTML semantic elements quiz.
Choose the correct semantic HTML tag for each scenario.
See your score and learn which answers were correct.
An interactive quiz that checks your understanding of semantic HTML elements: header, nav, main, article, section, aside, figure, time, address, and the other structural tags. Each question presents a markup scenario or a short code snippet, you pick the element you would use, and the tool marks the answer and explains the rule, with a best-practice tip alongside every question. The surprise most people hit is that semantic tags barely change how a page renders, so the quiz scores your grasp of meaning and structure, not styling. Strong CSS skills do not predict a good score here.
A concrete input and expected output from the current implementation.
Input
Which element should wrap the page's primary content? A: header, B: main, C: section, D: footer
Expected output
B - Correct. <main> is the element for the dominant content of the document. A page should have only one <main> element, and assistive technology exposes it as the 'main' landmark for jumping to the core content.
The HTML specification defines <main> as the dominant content of the document body and requires it to appear only once per page, so B is the only fitting answer. Screen readers expose it as the 'main' landmark, which is the point the question is testing.
Each round opens with a question about a semantic element or a short markup scenario, with several candidate elements to choose from. Selecting one submits the answer; the tool marks it right or wrong, reveals the element it was looking for, and explains the rule in a sentence or two. Correct answers accumulate into a round score, so you get feedback on every question as you go.
Every question pairs with a best-practice tip that states the rule behind the answer and the misuse that makes the question a trap. The tips concentrate on meaning: which tags express structure (article, section, aside, figure) and which are generic containers (div, span), and how browsers, search engines, and assistive technology read that difference.
Almost never. Browsers apply default styles to a few of them, like heading sizes and list bullets, but article and div render the same in practice. Semantics change what markup means to browsers, search engines, and screen readers, not how it looks, so you will not see the difference visually.
No, not by itself. Landmarks and heading structure give screen reader users a navigable outline, which is genuinely important, but accessibility also depends on alt text, labels, focus management, contrast, and keyboard behavior. The quiz covers the structural layer, not the full checklist.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Interactive periodic table - click elements, enter quiz mode, and guess elements from their properties. Gamified learning.
Explore the periodic table with element details, properties, and category filtering.
Browse and search ASCII, Unicode, and binary character codes with copy-to-clipboard.
Structured typing lessons with finger placement guide. Track WPM improvement over time with localStorage persistence.
Timed multiplication drills with accuracy tracking per table (1-12). Progress chart saved across sessions.
Identify countries and capitals on a continent-organized world grid. Filter by region, track scores, and learn capitals.