Challenge - Intermediate capstone
- HTML course
- Intermediate
- Lesson 67/67
- 7 min
Write a docs site that combines all intermediate topics.
Bring the intermediate level together
This documentation site combines every intermediate topic. It has a full <!DOCTYPE html> skeleton, semantic landmarks (<header>, <nav>, <main>, <aside>, <footer>), advanced text tags, and an accessible table.
A skip link moves keyboard users straight to the main content. The form section includes <fieldset>, <legend>, <label for> and validation attributes.
Practice Write a documentation site
Write a complete documentation site. Include <!DOCTYPE html>, <html> with lang, and a <head> with charset/viewport/<title>. In the body add a skip link (targeting the id on main) and <header>+<nav>, <main>, <aside>, <footer>. Inside <main> put an <article> with an <h2> and a <pre><code> block, plus a <table> with <caption> and a scoped <th>. Inside <aside> put a form with <fieldset>+<legend>, <label for>↔id, required and pattern.
Starter code
<!-- document type and root -->
<!-- metadata: charset, viewport, title -->
<!-- body: skip link, header, main, aside, footer -->Sample solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard API docs</title>
</head>
<body>
<a href="#content" class="skip-link">Skip to content</a>
<header>
<h1>Keyboard API docs</h1>
<nav aria-label="Main menu">
<a href="/home">Home</a>
<a href="/posts">Articles</a>
</nav>
</header>
<main id="content">
<article>
<h2>Setup</h2>
<p>Run the following command in your terminal:</p>
<pre><code>npm install keyboard</code></pre>
</article>
<section>
<h2>Release notes</h2>
<table>
<caption>Version history</caption>
<thead>
<tr><th scope="col">Version</th><th scope="col">Date</th></tr>
</thead>
<tbody>
<tr><td>1.0</td><td><time datetime="2026-01-15">15 January 2026</time></td></tr>
</tbody>
</table>
</section>
<aside>
<h2>Feedback</h2>
<form>
<fieldset>
<legend>Contact</legend>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="msg">Message</label>
<input type="text" id="msg" name="msg" required pattern="[A-Za-z0-9 ]{5,100}">
</fieldset>
</form>
</aside>
</main>
<footer>
<address>info@keyboard.example</address>
</footer>
</body>
</html>Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What should the skip link target?
- main Correct answer
- header
- footer
- aside
Explanation: The skip link points to the id on main.
2 Skip link
<a href="____" class="skip-link">Skip to content</a><a href="#content" class="skip-link">Skip to content</a>Explanation: The # sign references an id.
3 Topic and its tag
| Term | Meaning |
|---|---|
abbreviation |
abbr |
code block |
pre>code |
form group |
fieldset |
column styling |
colgroup |