Landmarks identify major page regions for navigation. Choose semantic elements by purpose rather than visual appearance.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Use main for central content and nav for a major navigation collection. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify major regions
Separate site navigation, main article and supporting content by purpose, not styling.
Step 2: Choose semantic elements
Use one visible main region and nav for major navigation groups.
Step 3: Name repeated landmarks
Label primary navigation and pagination distinctly so their destinations are understandable.
Worked scenario
Use main for central content and nav for a major navigation collection.
<nav aria-label="Primary">…</nav>
<main><h1>Interview preparation</h1>…</main>
<nav aria-label="Pagination">…</nav>The two nav elements serve different tasks. Their names help users choose between site-level movement and the article list’s pages. A footer containing miscellaneous links does not require every small group to become another landmark.
Common mistake
Many unnamed nav regions are difficult to distinguish with assistive technology.
Verify the behavior
Inspect the accessibility tree and navigate landmarks. Confirm names describe purpose and main content is unique.
Interview exercise
Label multiple navigation regions.
Answer and reasoning
Give each an accessible name describing its purpose, such as primary navigation or pagination.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.