HTML Summary
You can now connect document structure with the way people read and use a page. The next step is to build something small enough to finish and clear enough to explain.
How it works
- Review a complete document: language, encoding, title, landmarks, headings, alternatives, meaningful links, and labelled controls.
- Inspect relationships that are invisible in a screenshot, including submitted names, unique ids, table headers, and the distinction between navigation and actions.
- Continue with CSS for visual layout and JavaScript for behaviour. Keep the semantic HTML useful when presentation or scripting is unavailable.
A practical example
<main>
<h1>Your next small project</h1>
<p>Choose a real audience and one useful purpose.</p>
<ul><li>Write the content.</li><li>Choose meaningful elements.</li><li>Test the result.</li></ul>
</main>
The project does not need to be large. A clear event page with working navigation and thoughtful labels is stronger evidence of learning than a copied layout you cannot maintain.