HTML Roadmap
HTML is a markup language, not a programming language, and it defines the structure every web interface depends on. Its main use case is building semantic, machine-readable documents that browsers, search engines, and assistive technologies can trust. Its moat is universality: every framework, every design system, and every modern web stack still compiles down to strong HTML.
Scope: Study the topics in order. Write every example by hand, preview it in a browser, and validate your pages with the W3C validator as you go.
HTML Study Progress:
| # | HTML | Topic | Description |
|---|---|---|---|
| PHASE 1: FOUNDATIONS | |||
| 01 | HTML Syntax and Elements | Tags, attributes, void elements, entities, and how nesting becomes the DOM. | |
| 02 | Document Structure and Metadata | Doctype, head inventory, viewport, landmarks, and the parsing pipeline. | |
| 03 | Text, Headings and Inline Semantics | Heading scale, paragraphs, inline tags, code and quotes, div and span. | |
| PHASE 2: CONTENT AND NAVIGATION | |||
| 04 | Lists, Links and URLs | ul/ol/dl, anchor anatomy, URL parts, fragments, and accessible link text. | |
| 05 | Images, Figures and Media | img with alt, srcset and picture, figure, video/audio, and iframes. | |
| 06 | Data Tables | caption, thead/tbody/tfoot, th scope, colgroup — and why tables are never layout. | |
| PHASE 3: FORMS AND DATA | |||
| 07 | Forms and Controls | form/action/method, input types, labels, fieldset, select, and buttons. | |
| 08 | Validation and Submission | Constraint validation API, pattern rules, GET vs POST, and the submit flow. | |
| PHASE 4: SEMANTICS, METADATA AND ACCESSIBILITY | |||
| 09 | Semantic HTML and Landmarks | header/nav/main/article/section/aside, sectioning decisions, and outlines. | |
| 10 | Accessibility and ARIA | WCAG basics, focus order, alt text, the ARIA decision flow, and audits. | |
| 11 | Metadata, SEO and Social | title/description/canonical, Open Graph cards, and JSON-LD structured data. | |
| PHASE 5: PLATFORM AND TOOLING | |||
| 12 | HTML APIs and Interactive Markup | data-*, template, dialog, details, inline SVG, and web components. | |
| 13 | Validation, Debugging and Audits | W3C validator, DevTools DOM vs source, quirks mode, and Lighthouse/aXe. | |
| PHASE 6: DELIVERY AND QUALITY | |||
| 14 | Performance and Loading | Critical rendering path, defer/async, preload/prefetch, and lazy images. | |
| 15 | Security and Embedding | iframe sandbox, rel=noopener, mixed content, referrer policy, CSP, and SRI. | |
| 16 | HTML in the Modern Web | SSR, hydration, framework output, web components, and HTML email. | |
| PHASE 7: PRACTICE AND REFERENCE | |||
| 17 | Lab Examples | Simple HTML demos with two links each: view the code or preview the page. | |
| 18 | Study Projects | Guided multi-file pages that combine several chapters at once. | |
| 19 | References | Official standards, validators, and free categorized learning resources. | |
Credits: Lesson content drafted with DeepSeek via Fireworks AI. References: free resources below.
Free References
For the full categorized table — validators, official documentation, courses, and accessibility resources — see the References page.
- MDN Web Docs: HTML — the day-to-day reference (free)
- HTML Living Standard — WHATWG specification (free)
- W3C Markup Validation Service — validate every page you write (free)
- ARIA Authoring Practices Guide — widget patterns (free)
Congratulations on mastering HTML! You have built the structural foundation. Continue to the next roadmap to style your documents and build layouts with CSS.