HTML Exercises

Understand the topic

Practice deliberately by building short fragments from a brief. Write your own answer before revealing the suggestion. These tasks revisit structure, navigation, images, tables, and forms. Several valid answers are possible when they satisfy the same meaning and accessibility requirements. Explain why you selected each element instead of checking only whether the page looks similar.

Worked example

<ol><li>Create a heading hierarchy for a library page.</li><li>Link to a contact section.</li><li>Add an informative image with an alternative.</li><li>Build a two-column timetable with headers.</li><li>Create a labelled required email field.</li></ol>

Work in a new index.html file and test each task separately. The example is your exercise brief rather than a finished page to copy.

Practice

Complete all five tasks. Reveal the answer only after testing your own version.

<h1>Library</h1><h2>Timetable</h2>
<a href="#contact">Contact</a>
<img src="library.jpg" alt="Library entrance beside the market">
<table><caption>Opening times</caption><tr><th scope="col">Day</th><th scope="col">Hours</th></tr><tr><td>Monday</td><td>09:00-17:00</td></tr></table>
<section id="contact"><h2>Contact</h2><label for="email">Email</label><input id="email" name="email" type="email" required></section>

Common mistake

Do not reveal the answer before trying. The aim is to make and test your own structural decisions.

HTML documentation