Sign in Get started

Free course · 15 lessons · Intermediate

Modern HTML5 in Production

Fix the real-world problems HTML is responsible for: pages screen-reader users can't navigate, controls keyboards can't reach, forms that hide their errors or charge twice, images that shift and slow the page, render-blocking scripts, duplicate URLs and broken structured data, clickjacking, and user-generated HTML that becomes XSS. Every lesson starts from a production problem, with a live HTML preview or a runnable simulation.

Start the course

1. Semantics and Accessibility

Make pages usable by everyone: landmarks and headings for navigation, real buttons and links for keyboards, forms that announce their errors, and ARIA only where HTML can't express something.

  1. Landmarks and Headings: Pages You Can Navigate — Why screen-reader users abandoned a checkout built from divs, and how semantic elements and a real heading outline let people jump straight to what they need.
  2. Buttons, Links and Keyboard Access — Why keyboard users couldn't add items to the basket, and how choosing button vs link, keeping focus visible and avoiding clickable divs fixes it.
  3. Accessible Forms and Error Messages — Why users kept failing to register and abandoned the form, and how labels, descriptions, error association and focus management make forms usable for everyone.
  4. ARIA Done Right (and Wrong) — Why adding ARIA made a menu less accessible, and the rules that keep ARIA from hurting: native first, never hide focusable content, and keep states in sync.

2. Forms That Work

Make forms trustworthy and easy to complete: server-side validation behind HTML's built-in checks, autocomplete and input modes for fast entry, and protection against double submission.

  1. Client-Side vs Server-Side Validation — Why a 'required' quantity field didn't stop negative orders, and how HTML validation and server validation work together.
  2. Autocomplete, Input Types and Mobile Keyboards — Why mobile checkout conversion was low and password managers didn't work on the login page, and how type, autocomplete and inputmode fix data entry.
  3. Preventing Double Submissions — Why customers were charged twice when they double-clicked 'Pay', and how to combine HTML/JS safeguards with server-side idempotency.

3. Loading Performance

Make pages appear fast and stay stable: images that don't shift the layout or delay the main content, responsive image sizes, and scripts that don't block rendering.

  1. Images, LCP and Layout Shift — Why a marketing page felt slow and jumpy after an 'optimisation' that lazy-loaded every image, and how dimensions and loading priorities fix LCP and CLS.
  2. Responsive Images: Sending the Right Bytes — Why a news site's pages downloaded about 6.6 MB of images on every device, and how srcset, sizes and modern formats cut that by 55 to 85%.
  3. Render-Blocking Scripts — Why a blank white page showed for two seconds before anything appeared, and how defer, async and modules let HTML render while scripts download.

4. SEO, Sharing and Security

Get pages indexed and shared correctly with canonical URLs, metadata and structured data, and keep HTML safe: clickjacking defences, iframe sandboxing and user-generated content without XSS.

  1. Metadata, Canonical URLs and Structured Data — Why the same product appeared in search results under five URLs and lost its price snippet, and how canonical links, metadata and valid JSON-LD fix it.
  2. Clickjacking and Iframe Sandboxing — How an attacker tricked users into clicking 'Transfer' inside an invisible frame, and how frame-ancestors, sandbox and allow keep framing safe in both directions.
  3. User-Generated HTML Without XSS — How a comment containing an image tag stole session data despite a 'script tag filter', and how escaping, allowlist sanitisers and CSP make user content safe.

5. Capstone Projects

Audit and rebuild real pages with everything from this course.

  1. Capstone: Audit and Fix a Landing Page — Audit a marketing landing page for accessibility, performance, SEO and security problems, prioritise them, and fix the HTML.
  2. Capstone: An Accessible, Fast Checkout Form — Design the HTML for a checkout form that works with keyboards, screen readers, password managers and autofill, validates helpfully, and can't double-charge.