Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Study the question, then follow the complete answer and its reasoning.
Build a skip link, a labeled primary navigation region, and working fragment links for a one-page workshop guide.
Every fragment in an href must exactly match one unique id. The skip link should target the main content.
<a href="#main-content">Skip to main content</a>
<nav aria-label="Primary">
<a href="#schedule">Workshop schedule</a>
<a href="#materials">Required materials</a>
</nav>
<main id="main-content">
<h1>HTML workshop</h1>
<section id="schedule">
<h2>Schedule</h2>
<p>The workshop starts at 10:00.</p>
</section>
<section id="materials">
<h2>Materials</h2>
<p>Bring a laptop and a notebook.</p>
</section>
</main>The first link lets keyboard users bypass repeated navigation. nav communicates the link group's purpose, and its accessible label distinguishes it from other navigation regions. Each fragment works because its href matches one destination id exactly.
Keyboard and assistive-technology users should be able to bypass repeated controls and reach meaningful sections quickly. A skip link reduces unnecessary tab stops, a nav landmark exposes a recognizable region, and exact fragment relationships make a long single-page document easier for everyone to explore.
This beginner HTML exercise focuses on Create keyboard-friendly skip navigation, Label navigation regions, Connect fragments to unique targets. Its requirements define the exact behavior to implement before you write code.
Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.
Attempt Create accessible page navigation first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
