How much HTML do you already have?
Be honest — nobody is watching. This only decides which chapters come first; every chapter stays open to you either way.
“I can structure a real page.”
Start with the document itself — what a browser actually builds from your markup, and the elements that carry real meaning.
- You've copied HTML before without knowing why each tag was there
- You want semantic elements, not div soup
- You want forms, links and images that actually work without JS
“I can structure a real application.”
You know the elements. Now learn the landmarks, the accessibility tree, and the forms/validation that hold up a real app.
- Comfortable with semantic elements and basic forms
- You've had a screen reader (or a lighthouse audit) tell you something you didn't expect
- You want a page structure a real user with a keyboard or screen reader can actually use
“I can reason about the parser and the a11y tree.”
ARIA patterns that actually work, the parsing algorithm, and the performance/SEO decisions behind a page that scales.
- You can already build landmark-correct, validated forms
- You debug focus traps and screen-reader announcements, not just layout
- You want the why under the HTML parser and resource loading
Not sure? Start at Beginner — every path opens at the section people usually skip.
Full syllabus
Everything each level eventually covers — ticked sections are written, the rest are still on the desk.
Beginner0 / 7 sections written
- Document structure & the parsercoming soon
doctype, head/body, how the DOM is built from markup
- Text & semantic elementscoming soon
Headings, sections, articles, lists
- Links, images & mediacoming soon
Anchors, img, figure, audio/video basics
- Forms basicscoming soon
Inputs, labels, buttons, form submission
- Tablescoming soon
Table structure, and when a table is the right tool
- Attributes & global attributescoming soon
id/class/data-*, aria basics
- Meta tags & the document headcoming soon
charset, viewport, basic SEO tags
✅ Checkpoint: you can hand-build a semantic, accessible multi-section page with a working form, without reaching for a div for everything.
Intermediate0 / 8 sections written
- Semantic landmarks & document outlinecoming soon
header/nav/main/footer/aside, the document outline
- Forms in depthcoming soon
Input types, validation attributes, fieldset/legend
- Accessibility fundamentalscoming soon
Roles, labels, alt text, focus order
- Embedded contentcoming soon
iframe, object/embed, inline SVG basics
- Web components (intro)coming soon
Custom elements, shadow DOM, templates/slots
- Microdata & structured datacoming soon
schema.org basics, Open Graph tags
- Progressive enhancementcoming soon
Graceful degradation, feature detection
- The Constraint Validation APIcoming soon
Native form validation, custom validity messages
✅ Checkpoint: you can build a landmark-correct, keyboard-navigable page with real form validation, and pass a basic accessibility audit.
Advanced0 / 7 sections written
- Accessibility in depthcoming soon
ARIA patterns, live regions, keyboard traps
- Performancecoming soon
Resource hints (preload/prefetch/preconnect), lazy loading
- Responsive imagescoming soon
srcset/sizes, the picture element, art direction
- Web components in depthcoming soon
Lifecycle callbacks, styling shadow DOM
- Securitycoming soon
Sandboxing iframes, CSP from the HTML side
- The HTML parsing algorithmcoming soon
Error recovery — why malformed HTML still renders
- HTML for SEO & sharing at scalecoming soon
Canonical URLs, hreflang, rich snippets
✅ Checkpoint: you can build a fully keyboard-and-screen-reader-accessible widget from scratch, and explain how the browser recovers from malformed markup.
- Accessibility shows up twice on purpose — labels and alt text as a beginner habit, ARIA patterns and keyboard traps as an advanced skill once the basics are automatic.
- Forms get their own beginner AND intermediate chapter because native form validation alone quietly replaces a surprising amount of JavaScript.
- Web components and the parsing algorithm are the deepest, most-skipped layer — most people who write HTML daily never need them, but the advanced tier doesn't skip them.