HTML Exercises
Three small HTML exercises - semantic landmark layout, an accessible form, and a responsive image gallery.
Three short challenges
EXAMPLE
<!-- 1. Landmark layout - replace divs with semantic tags -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Landmark layout</title>
</head>
<body>
<header>
<h1>MySite</h1>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/pricing'>Pricing</a></li>
<li><a href='/about'>About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome</h2>
<p>Body...</p>
</article>
<aside>
<h3>Newsletter</h3>
<p>Get our weekly digest.</p>
</aside>
</main>
<footer>
<small>© 2026 MySite. <a href='/privacy'>Privacy</a></small>
</footer>
</body>
</html>
<!-- 2. Accessible signup form -->
<form action='/signup' method='post' novalidate>
<fieldset>
<legend>Create your account</legend>
<p>
<label for='name'>Full name</label>
<input id='name' name='name' type='text' required autocomplete='name' />
</p>
<p>
<label for='email'>Email</label>
<input id='email' name='email' type='email' required autocomplete='email'
aria-describedby='email-help' />
<span id='email-help' class='hint'>We will never share it.</span>
</p>
<p>
<label>
<input type='checkbox' name='terms' required />
I agree to the <a href='/terms'>terms</a>.
</label>
</p>
<button type='submit'>Sign up</button>
</fieldset>
</form>
<!-- 3. Responsive image gallery with semantic figure -->
<section class='gallery'>
<h2>Gallery</h2>
<figure>
<img
src='/photo-1-400.jpg'
srcset='/photo-1-400.jpg 400w, /photo-1-800.jpg 800w'
sizes='(min-width: 768px) 50vw, 100vw'
alt='Lighthouse at sunset'
loading='lazy'
width='800' height='600'
/>
<figcaption>Lighthouse at sunset, May 2026</figcaption>
</figure>
<figure>
<img src='/photo-2-400.jpg' alt='Forest path in autumn' loading='lazy'
width='800' height='600' />
<figcaption>Forest path in autumn</figcaption>
</figure>
</section>
<style>
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .gallery { grid-template-columns: 1fr 1fr; } }
figure { margin: 0; }
img { max-width: 100%; height: auto; }
</style>
Why it matters
These three drill the patterns most websites need - landmark layout for navigation, accessible forms for input, responsive figures for content. Get these reflexes and your default HTML is accessible and responsive without thinking.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Exercises</title>
</head>
<body>
<h1>HTML Exercises</h1>
<p>This is a demo page for the "HTML Exercises" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Each lesson has one exercise — what format is the answer in?
-in-the-blank
Four-letter verb that means "complete".
Discussion
Loading…