HTML in Depth: Semantic Markup, Forms, Media & Meta
Rebuild a fictional outdoor shop's pages with landmarks, headings, accessible forms and constraint validation, responsive images, video and captions, iframes, meta and Open Graph tags, data attributes and accessible tables, with every answer checked as you go.
- One-time payment
- Instant access right after payment
- Secure checkout with Stripe
About this course
In this intermediate course you rebuild the website of a fictional outdoor shop and work out, lab by lab, what browsers, screen readers and search engines do with your markup. You turn div soup into landmarks, fix heading outlines, label forms and predict how min, max, step and pattern validate input. You calculate rendered image heights, pick the file srcset delivers, size videos and check caption reading speed. Then you audit iframes, titles, descriptions, Open Graph, canonical and hreflang tags, data attributes and accessible tables, and finish with a scored page audit. Every answer is checked instantly; the first lesson is free.
Lessons
- Semantic Landmarks: From div Soup to header, nav, main & footerFree
- Headings and the Outline: h1 to h6 Without Skipped Levels Locked
- Machine-Readable Text: time, data, abbr and address Locked
- Labels, fieldset and legend: Every Control Gets a Name Locked
- Input Types, inputmode and autocomplete: The Right Field for Every Value Locked
- Constraint Validation I: required, min, max and step Locked
- Constraint Validation II: pattern, minlength and maxlength Locked
- What a Form Sends: name/value Pairs, disabled vs readonly, GET vs POST Locked
- Images Done Right: alt Text, width/height and Layout Shift Locked
- Responsive Images: srcset, sizes and picture Locked
- Video: controls, poster, preload and the Autoplay Rules Locked
- Captions with track and WebVTT: Timing and Reading Speed Locked
- Embedding with iframe: title, loading, sandbox and Aspect Ratio Locked
- The head: charset, viewport, title and meta description Locked
- Open Graph Tags: How Your Links Look When Shared Locked
- Canonical URLs and hreflang: One Page, Many Addresses Locked
- data-* Attributes and dataset: Custom Data in Markup Locked
- Data Tables: caption, thead, tbody and Spanning Cells Locked
- Accessible Tables: th, scope and headers/id Locked
- Final Project: Audit and Score the Finch UL 2 Product Page Locked