Practice

HTML exercises

Make a change, predict what it will do, and compare the result.

1
HTML Elements
Structure a document with semantic tags.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
HTML
```
<main>
  <h1>Hello, world</h1>
  <p>My first page.</p>
</main>
```
2
HTML Forms
Collect input with labelled form controls.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
HTML
```
<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>
```
3
HTML Lists and Tables
Mark up lists and tabular data with the right elements.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
HTML
```
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<table>
  <tr><th>Language</th><th>Year</th></tr>
  <tr><td>C</td><td>1972</td></tr>
</table>
```
4
HTML Links and Images
Connect pages and show pictures with alternative text.
Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.
Review lesson →Open playground
Show starting example
HTML
```
<a href="/tutorials">Browse tutorials</a>
<img src="logo.png" alt="Programonic logo" width="120" height="120">
```

HTML Semantic Page Layout

Describe the regions of a page with header, nav, main, article, aside, and footer.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<header>
  <h1>Programonic</h1>
  <nav aria-label="Main">
    <a href="/tutorials">Tutorials</a>
    <a href="/examples">Examples</a>
  </nav>
</header>
<main>
  <article>
    <h2>Learning loops</h2>
    <p>A loop repeats a block of code.</p>
  </article>
  <aside>
    <h2>Related</h2>
    <p>Functions and recursion.</p>
  </aside>
</main>
<footer>
  <p>&copy; 2026 Programonic</p>
</footer>

HTML Accessibility Basics

Make pages usable with keyboards and screen readers through labels, alt text, and landmarks.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<a class="skip-link" href="#content">Skip to content</a>
<main id="content">
  <h1>Contact</h1>
  <form>
    <label for="name">Name</label>
    <input id="name" name="name" autocomplete="name" required>
    <button type="submit">Send</button>
  </form>
  <img src="chart.png" alt="Bar chart: sales rose 20% in 2025">
  <button type="button" aria-label="Close dialog">&times;</button>
</main>

HTML Document Head and Metadata

Set the character encoding, viewport, title, description, and stylesheet for a page.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Loops in Python | Example Site</title>
  <meta name="description" content="Learn how loops repeat code, with examples.">
  <link rel="canonical" href="https://example.com/loops">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Loops in Python</h1>
</body>
</html>

HTML Responsive Images and Media

Offer different image files for different screens and embed video with a fallback.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg">
  <img src="narrow.jpg" alt="A mountain lake at sunrise" width="800" height="450" loading="lazy">
</picture>
<img srcset="small.jpg 480w, large.jpg 960w"
     sizes="(min-width: 600px) 50vw, 100vw"
     src="small.jpg" alt="Product photo" width="480" height="320">
<video controls width="320">
  <source src="clip.mp4" type="video/mp4">
  Your browser does not support video.
</video>

HTML Forms: GET versus POST

See what each form method sends over HTTP and when to use it.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<form action="/search" method="get">
  <label for="q">Search</label>
  <input id="q" name="q" value="tcp">
  <button type="submit">Search</button>
</form>

<form action="/login" method="post">
  <input name="user" autocomplete="username">
  <input name="password" type="password" autocomplete="current-password">
  <button type="submit">Log in</button>
</form>

HTML Safe Links, Embeds, and Content Security Policy

Limit what linked and embedded content can do with rel, sandbox, and a content security policy.

Adapt the lesson example. Change one value or element, predict the result, and explain why it changes.

Review lesson →Open playground

Show starting example

HTML

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https:">
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External site</a>
<iframe src="https://example.com/widget" title="Widget"
        sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>
<input type="password" name="password" autocomplete="current-password">

HTML Elements

HTML Forms

HTML Lists and Tables

HTML Links and Images

HTML Semantic Page Layout

HTML Accessibility Basics

HTML Document Head and Metadata

HTML Responsive Images and Media

HTML Forms: GET versus POST

HTML Safe Links, Embeds, and Content Security Policy