The HTML roadmap
Every HTML lesson we teach, laid out as one path. Each station is a stage; tap any lesson to open it. Stations turn teal as you finish them.
Legend:Lesson stageStage completeTap a lesson to open it
01
Foundations
The HTML Document Skeleton
The Head: charset, viewport, title
Tags, Elements & Attributes
HTML Entities & Special Characters
02
Text & lists
Headings & the Outline
Paragraphs & Breaks
Preformatted Text & Quotes
Unordered & Ordered Lists
Description & Nested Lists
03
Inline semantics
Meaning vs Appearance
mark, small, sub & sup
Edits & Computer Text
abbr, q, time & span
04
Links
The Anchor Element & href
Paths & Fragment Links
New Tabs, rel & mailto/tel
05
Images & media
The img Element & Alt Text
width, height & Layout Shift
Responsive Images
Image Performance & Inline SVG
video, audio & Captions
iframe, sandbox & Embeds
06
Tables
Table Structure & Caption
Spanning & Accessible Tables
07
Forms
The form Element & Submission
Labels & Text Inputs
Checkboxes, Radios & Pickers
select, textarea & buttons
Grouping & Gauges
Built-in Validation
08
Semantics & accessibility
Semantic Markup vs Div Soup
Page Landmarks
article, section, aside & address
Native-First & ARIA
Keyboard, Focus & Skip Links
Global Attributes & i18n
09
Metadata, SEO & performance
Title, Meta & Indexing
Social Previews & Structured Data
Loading CSS, JS & Resource Hints
10
Modern interactive
details & summary
Native Overlays
Editable, Templates & Web Components
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.