HTML Examples
A pattern is useful when you understand why its elements fit together. Practise adapting small structures rather than pasting a large page whose relationships you cannot explain.
How it works
- Start with a complete, meaningful fragment and identify the elements that carry semantics rather than appearance.
- Change the subject, wording, and relationships deliberately. Update ids and their references whenever you duplicate a component.
- Check a pattern without CSS and with keyboard navigation. A polished visual result can still contain broken labels or misleading actions.
A practical example
<article aria-labelledby="bike-title">
<h2 id="bike-title">Bike repair</h2>
<p>Learn to inspect brakes and tyre pressure.</p>
<dl><dt>Places</dt><dd>8</dd><dt>Duration</dt><dd>Two hours</dd></dl>
<a href="bike-repair.html">Read bike-repair session details</a>
</article>
This pattern combines a self-contained description, a named heading, a short definition list, and a specific next destination.