HTML Examples
A handful of small HTML patterns you reach for again and again - form, accessible button, details/summary, dialog, lazy image.
HTML by example
EXAMPLE
<!-- 1. Accessible form with validation -->
<form action='/signup' method='post' novalidate>
<div>
<label for='email'>Email</label>
<input id='email' name='email' type='email' required autocomplete='email' />
</div>
<div>
<label for='password'>Password</label>
<input id='password' name='password' type='password' required minlength='12'
autocomplete='new-password' />
<p class='hint'>Use at least 12 characters.</p>
</div>
<button type='submit'>Sign up</button>
</form>
<!-- 2. Accordion with <details> + <summary> - no JS needed -->
<details>
<summary>How do I cancel?</summary>
<p>Sign in, go to Settings -> Billing, click Cancel.</p>
</details>
<details>
<summary>Do you offer refunds?</summary>
<p>Within 14 days, yes.</p>
</details>
<!-- 3. Modal with the native <dialog> element -->
<button onclick='document.getElementById("m").showModal()'>Open</button>
<dialog id='m'>
<form method='dialog'>
<h2>Are you sure?</h2>
<p>This cannot be undone.</p>
<menu>
<button value='cancel'>Cancel</button>
<button value='confirm'>Delete</button>
</menu>
</form>
</dialog>
<!-- 4. Lazy-loaded responsive image -->
<img
src='/hero-400.jpg'
srcset='/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1200.jpg 1200w'
sizes='(min-width: 1024px) 1200px, (min-width: 768px) 800px, 400px'
alt='Sunset over the bay'
loading='lazy'
decoding='async'
width='1200' height='600'
/>
<!-- 5. Table with proper structure for screen readers -->
<table>
<caption>Q4 sales by region</caption>
<thead>
<tr>
<th scope='col'>Region</th>
<th scope='col'>Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope='row'>AU</th>
<td>$420k</td>
</tr>
<tr>
<th scope='row'>UK</th>
<td>$310k</td>
</tr>
</tbody>
</table>
Why it matters
These five examples cover most everyday HTML. Forms, accordions, modals, images, and tables - get these right with semantic markup and you have done 80 percent of the accessibility work without writing any ARIA.
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 Examples</title>
</head>
<body>
<h1>HTML Examples</h1>
<p>This is a demo page for the "HTML Examples" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Open the live editor on any example by clicking the button labelled…
»
The green call-to-action button.
Discussion
Loading…