HTML Learning Roadmap

Dual-audience curriculum — stages, checkpoint projects, and AI agent verification prompts

Document structure, DOCTYPE, head/body, meta tags, and basic page anatomy

Every HTML5 tag with content model, key attributes, accessibility, and when to use it

DOCTYPE declaration, html/head/body hierarchy, nesting rules, and document outline

Title, meta tags (charset, viewport, description), link/script, and SEO-critical head patterns

Charset, viewport, robots, theme-color, favicons, and SEO meta patterns

Full reference of all HTML elements, content models, global attributes, void elements, and nesting rules

Global, boolean, data, ARIA, and event attributes — naming and best practices

Named and numeric character entities, encoding, and special characters

h1-h6 hierarchy, paragraph tags, line breaks, horizontal rules, and semantic heading structure

Inline elements (strong, em, mark, ins, del, sub, sup), quotation tags, and phrasing content

Ordered, unordered, definition lists, nesting, list styling, and accessible list patterns

Hyperlinks, anchor tags, href targets, relative/absolute URLs, navigation, and link accessibility

img, srcset, picture, figure, figcaption, responsive images, lazy loading, and alt text

picture element, art direction, AVIF/WebP, sizes, and responsive image patterns

Table structure, caption, thead/tbody/tfoot, colspan/rowspan, styling, and responsive table techniques

Form structure, controls, labels, fieldset/legend, attributes, styling, and UX patterns

All input types (text, number, date, file, range, etc.), attributes, and browser behavior

Required fields, pattern matching, min/max, custom validity, constraint validation API, and UX

FormData, Constraint Validation, ValidityState, and form submission events

Button types (submit/reset/button), attributes, states, styling, accessibility, and form interaction

Audio/video elements, codecs, captions/tracks, controls, and media API

iframe sandboxing, embeds, external content, security attributes, and responsive embeds

2D drawing API, shapes, paths, text, transforms, animation loops, pixel manipulation, and basic WebGL

Scalable vector graphics, shapes, paths, gradients, filters, SMIL animation, and responsive SVG

Header, nav, main, article, section, aside, footer, and meaningful document structure

Native disclosure widgets, exclusive accordion name, styling, and accessibility

Modal/non-modal dialogs, Popover API, top layer, focus management, and patterns

data-* attributes, dataset API, storing custom data, and JavaScript integration

contenteditable, designMode, Selection/Range, paste sanitization, a11y, and editor libraries

Custom element lifecycle, autonomous/customized built-in elements, and registration

Shadow tree, encapsulation, slots, styling scoping, and DOM composition

template element, slot, declarative content fragments, and reusable markup patterns

Combining custom elements, Shadow DOM, templates, and slots for reusable components

itemscope, itemtype, itemprop, schema.org vocabularies, and structured data for search engines

OG meta tags, Twitter Cards, SEO meta, canonical links, and social preview optimization

lang attribute, dir, charset, locale-aware content, date/number formatting, and multilingual pages

localStorage, sessionStorage, storage events, limits, and data persistence patterns

pushState, replaceState, popstate event, SPA routing, and browser history manipulation

navigator.geolocation, position tracking, permission handling, and location-based features

Drag events, dataTransfer, drag effects, file uploads, and accessible drag-and-drop

Dedicated/Shared workers, message passing, thread isolation, and background computation

EventSource API, stream format, reconnection, LLM token streaming, and auth patterns

WCAG standards, ARIA roles/states, keyboard navigation, screen reader support, and inclusive design

Critical rendering path, resource hints, lazy loading, async/defer, and performance budgets

Content Security Policy, XSS prevention, sanitization, HTTPS, and secure HTML patterns

HTML specification, W3C/WHATWG standards, DOCTYPE variants, validation, and browser compatibility

Tokenization, tree construction, foster parenting, script parsing, innerHTML, DOMParser, and sanitization

Semantic markup, forms, a11y, media, performance, SEO, and security checklists