HTML Learning Roadmap

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

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

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

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

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

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

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

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

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

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