HTML Course
Structure the content of every web page.
Architecture
From Markup to Pixels
The browser pipeline: parse HTML, build the DOM, combine with CSSOM, layout, and paint.
Enterprise learning path
HTML Tutorial
- 1HTML HOMENext up
html home premium browser rendering core web vitals seo accessibility security enterprise frontend
- 2HTML Introduction
html introduction html introduces the document contract that browsers, google, and assistive techn html is not a presentation language —
- 3HTML Editors
html editors html editors shape what ships. staff engineers own the full pipeline — formattin html editors — vs code,
- 4HTML Basic
html basic basic html defines the minimal interoperable document. staff engineers enforce s basic html is the smallest valid document
- 5HTML Elements
html elements html elements define structure through content models and semantics. staff engin html elements are vocabulary with content models
- 6HTML Attributes
html attributes attributes configure behavior, accessibility, seo, and loading. staff engineers attributes configure elements — href, src, alt, aria-*,
- 7HTML Headings
html headings heading elements structure content for accessibility, seo, and human scanability heading elements (h1–h6) are the primary structural signals
- 8HTML Paragraphs
html paragraphs the paragraph element is the interoperable unit for body copy. production conten paragraphs (<p>) are the default prose
- 9HTML Styles
html styles inline styles are a legacy escape hatch for email and edge cases. production web inline styles via the
- 10HTML Formatting
html formatting text formatting elements encode emphasis and ancillary meaning in html. staff wr text formatting elements — strong, em,
- 11HTML Quotations
html quotations quotation elements document provenance and structure cited content for users and quotation elements — blockquote, q, cite, footer
- 12HTML Comments
html comments html comments annotate source for developers but ship to every client. productio html comments (<!-- -->) are parser
- 13HTML Colors
html colors html color values bridge legacy presentation attributes and modern css. staff en html color values appear in legacy
- 14HTML CSS
html css html integrates css through link, style, and inline attributes — each with casca html is the delivery vehicle
- 15HTML Links
html links anchor elements connect the web — crawlers, users, and assistive technology all anchor elements (<a href>) are
- 16HTML Images
html images images tie together accessibility, seo image search, and core web vitals. staff the img element embeds raster
- 17HTML Favicon
html favicon favicon markup brands tabs, serps, and home screens with small head declarations favicon markup in <head> declares tab
- 18HTML Page Title
html page title the title element names the document for browsers, assistive technology, and sea the <title> element sets document
- 19HTML Tables
html tables semantic tables deliver accessible, crawlable, exportable tabular data. producti html tables represent tabular data — not page layout.
- 20HTML Lists
html lists lists structure enumerable content for assistive technology, print, and search e list elements encode sequence and grouping semantically
- 21HTML Block & Inline
html block & inline block and inline categories define document structure, parser behavior, and read html content categories — block-level
- 22HTML Div
html div the div element is a non-semantic flow container for layout when no other elemen the div element is
- 23HTML Classes
html classes the class attribute groups styling and scripting hooks across elements without s the class attribute assigns space-separated tokens
- 24HTML Id
html id the id attribute provides document-unique hooks for fragments, form labels, and the id attribute must be unique
- 25HTML Buttons
html buttons the button element is the native action control with type semantics, keyboard su the button element triggers actions
- 26HTML Iframes
html iframes iframes embed isolated browsing contexts for payments, media, and untrusted widg iframes embed separate documents — sandboxed payment
- 27HTML JavaScript
html javascript script elements orchestrate when javascript runs against dom construction. produ javascript in html — via <script> — controls
- 28HTML File Paths
html file paths file path strings in html attributes resolve against document base and origin. p file paths in html
- 29HTML Head
html head the head element orchestrates encoding, discovery hints, and document identity b the document head holds metadata, title, linked
- 30HTML Layout
html layout semantic layout elements define document regions for users, assistive technology html layout uses semantic landmarks — header, nav,
- 31HTML Responsive
html responsive responsive html declares viewport behavior and multi-resolution resources in mar responsive html starts with viewport configuration and responsive
- 32HTML Computercode
html computercode code-related html elements mark programmatic text for assistive technology, copy computer code in html uses code, pre, kbd,
- 33HTML Semantics
html semantics semantic html is the foundation of accessible, crawlable, maintainable documents html semantics assign meaning to markup — buttons
- 34HTML Style Guide
html style guide html style guides align teams on markup that passes accessibility, seo, security an html style guide codifies
- 35HTML Entities
html entities html entities escape syntactically significant characters and represent symbols html entities — &lt;, &amp;, numeric &#x26a0; —
- 36HTML Symbols
html symbols html symbols represent currency, math, and special characters in documents. prod html symbols — currency (£ € ¥),
- 37HTML Emojis
html emojis emojis in html are standard unicode characters with cross-platform rendering and emojis in html are unicode characters —
- 38HTML Charsets
html charsets character set declaration connects html bytes to readable text worldwide. global character encoding tells the browser how to
- 39HTML URL Encode
html url encode url encoding makes safe links and form submissions across ascii-limited uri synt url encoding (percent-encoding) represents reserved
- 40HTML vs. XHTML
html vs. xhtml html5 text/html won the open web; xhtml remains a legacy and specialized-format html vs xhtml —
HTML Forms
- 41HTML Forms
html forms the form element orchestrates control association, encoding, validation, and nav html forms are the browser's native contract for
- 42HTML Form Attributes
html form attributes form attributes route and encode user intent. staff-level ownership means charse form attributes configure where data goes,
- 43HTML Form Elements
html form elements form elements each carry submission, keyboard, and accessibility semantics. staf form elements are the control primitives browsers
- 44HTML Input Types
html input types input types specialize browser behavior for each data shape. production teams ma input types switch the browser's
- 45HTML Input Attributes
html input attributes input attributes encode validation, autofill, and accessibility metadata. staff input attributes bind dom controls to form
- 46Input Form Attributes
input form attributes input form attributes decouple layout from submission ownership and per-button r form-associated attributes on inputs (form, formaction,
HTML Graphics
HTML Media
- 49HTML Media
html media html5 media elements are production streaming infrastructure: multi-source codec html5 media — <video>, <audio>, <source>, <track> — replaces
- 50HTML Video
html video the video element is production streaming policy in markup: playsinline for ios, <video> is the visual half of
- 51HTML Audio
html audio the audio element powers podcast, preview, and notification playback in producti <audio> delivers sound without a visual frame
- 52HTML Plug-ins
html plug-ins html plug-in markup is legacy debt — flash and java taught the industry why sand html plug-ins —
- 53HTML YouTube
html youtube youtube iframe embeds trade infrastructure cost for third-party weight — product youtube embeds via <iframe src="https://www.youtube.com/embed/video_id"> outsource encoding,
HTML APIs
- 54HTML Web APIs
html web apis web apis are production integration points — not magic: capability detection, pe web apis extend javascript beyond
- 55HTML Geolocation
html geolocation geolocation powers local ux like google maps and uber — production engineering p geolocation api (navigator.geolocation) exposes device
- 56HTML Drag and Drop
html drag and drop html drag and drop enables gmail-style file upload and trello-style reorder when html drag and drop
- 57HTML Web Storage
html web storage web storage persists ux state synchronously per origin — production use is theme web storage — localstorage
- 58HTML Web Workers
html web workers web workers keep main-thread inp healthy by isolating parse, search, and crypto web workers run javascript
- 59HTML SSE
html sse server-sent events power one-way live updates in production dashboards and log t server-sent events (sse) — new eventsource(url)
HTML Examples
- 60HTML Certificate
html certificate html completion credentials succeed when backed by assessed competencies, server html completion credentials are not vanity pdfs —
- 61HTML Examples
html examples production html example galleries encode team conventions as runnable, tested do production html example patterns are curated, runnable
- 62HTML Editor
html editor in-browser html editor sandboxes deliver learning velocity only when isolated vi in-browser html editor sandboxes power learn-by-doing workflows
- 63HTML Quiz
html quiz html assessment quizzes discriminate engineering skill when built as accessible html assessment quizzes at staff level test
- 64HTML Exercises
html exercises guided html exercises build production skill when grounded in realistic defectiv guided html exercises scaffold motor skill and
- 65HTML Challenges
html challenges advanced html challenges train staff-level response: fix realistic broken docume advanced html challenges simulate staff-level fire drills: ship
- 66HTML Website
html website multi-page html website architecture is information design plus a versioned temp multi-page html website architecture is the document
- 67HTML Syllabus
html syllabus an html engineering syllabus sequences parser-to-production competencies with me html engineering syllabus maps competencies to outcomes — not
- 68HTML Study Plan
html study plan structured html study plans convert syllabus competencies into timed, artifact-d structured html study plans translate syllabus into
- 69HTML Interview Prep
html interview prep html interview preparation for staff loops emphasizes oral broken-markup review, html interview preparation at staff level means
- 70HTML Bootcamp
html bootcamp html engineering bootcamps succeed when they front-load semantics, a11y, securit html engineering bootcamp intensity should produce job-ready document-layer
- 71HTML Summary
html summary html engineering summary unifies the course around five lenses and the parser-to html engineering mental models compress the
- 72HTML Accessibility
html accessibility html accessibility engineering prioritizes semantic structure, labeled forms, ke html accessibility engineering starts with semantic markup — not
HTML References
- 73HTML Tag List
html tag list html tag list reference powers enterprise lint contracts — tier a/b/c governance html tag vocabulary for lint
- 74HTML Attributes (Reference)
html attributes (reference) html attributes reference feeds validation pipelines — global vs element-specifi html attribute reference for validation pipelines catalogs
- 75HTML Global Attributes
html global attributes global html attributes cross-cut every element — enterprise teams govern id, cla global html attributes (id, class,
- 76HTML Browser Support
html browser support html browser support reference powers progressive enhancement — tiered fallbacks html feature browser support matrices drive progressive
- 77HTML Events
html events html events reference guides enterprise away from inline handlers toward csp-com html and dom event attributes (onclick inline,
- 78HTML Colors (Reference)
html colors (reference) html colors reference connects named/hex/hsl values to enterprise token pipeline html color values in markup appear in
- 79HTML Canvas (Reference)
html canvas (reference) canvas reference covers width/height markup, fallback content, role/aria pattern canvas element markup and attributes define the fallback
- 80HTML Audio/Video
html audio/video audio/video reference documents src/source/track/poster/preload attributes tying audio and video element markup controls media delivery without flash — src,
- 81HTML Doctypes
html doctypes html doctypes reference enforces the single html5 declaration for standards mode html doctype declarations trigger standards mode in
- 82HTML Character Sets
html character sets html character sets reference mandates utf-8 declaration in first 1024 bytes, ht html character encoding declarations (<meta
- 83HTML URL Encode (Reference)
html url encode (reference) url encode reference covers percent-encoding in href/src/action, form get applic url encoding in html attributes (percent-encoding
- 84HTML Lang Codes
html lang codes lang codes reference documents bcp 47 on html/elements, hreflang alternate links bcp 47 language tags in html
- 85HTTP Messages
http messages http messages reference links html documents to status codes, content-type chars http messages in relation to html connect
- 86HTTP Methods
http methods http methods reference ties html form method/action/enctype to get idempotent se http methods in html form markup (get
- 87PX to EM Converter
px to em converter px to em/rem reference provides conversion math for typography handoff, recommen px to em rem conversion
- 88Keyboard Shortcuts
keyboard shortcuts keyboard shortcuts reference documents engineer devtools and screen reader short keyboard shortcuts for html engineering workflows accelerate devtools,
Browser Rendering Engine
- 89Browser Rendering Engine Overview
browser rendering engine overview browser rendering engines convert html/css/js to pixels through a multi-stage pi browser rendering engines transform html,
- 90HTML Tokenization & Parsing
html tokenization & parsing html tokenization converts bytes to tokens; the tree builder constructs dom per html tokenization is
- 91DOM Construction
dom construction dom construction builds the live tree consumed by style, layout, ax, and scripts dom construction builds the live
- 92CSSOM & Render Tree
cssom & render tree cssom and render tree connect dom to layout. blink, webkit, and gecko recalculat cssom and render
- 93Layout, Paint & Composite
layout, paint & composite layout, paint, and composite transform styled dom into frames. the chrome team d layout, paint, and
- 94Critical Rendering Path
critical rendering path the critical rendering path names engine stages and gating resources from first the critical rendering path
- 95Reflow & Repaint
reflow & repaint reflow and repaint are main-thread layout and paint invalidations that cause jan reflow (layout) recalculates geometry when
- 96Compositor Layers & GPU
compositor layers & gpu compositor layers and gpu compositing decouple scroll and transform animation fr compositor layers split page content
Core Web Vitals
- 97Core Web Vitals Overview
core web vitals overview core web vitals standardize loading, interactivity, and visual stability for rea core web vitals are google's
- 98Largest Contentful Paint (LCP)
largest contentful paint (lcp) largest contentful paint captures when main content becomes visible. chrome team largest contentful paint (lcp) marks
- 99Interaction to Next Paint (INP)
interaction to next paint (inp) interaction to next paint captures full responsiveness from input to visual upda interaction to next
- 100Cumulative Layout Shift (CLS)
cumulative layout shift (cls) cumulative layout shift captures visual instability from layout changes. chrome cumulative layout shift (cls) quantifies
- 101RUM, CrUX & Field Data
rum, crux & field data rum and crux provide real-user performance data complementing lab lighthouse. th rum (real user monitoring)
- 102Performance Budgets
performance budgets performance budgets operationalize core web vitals and crp constraints as ci-enf performance budgets are enforceable limits on metrics
Advanced SEO Engineering
- 103Advanced SEO Engineering Overview
advanced seo engineering overview advanced seo engineering owns the html surface google search indexes: complete h advanced seo engineering treats
- 104Meta, Canonical & Robots
meta, canonical & robots meta robots and link canonical are html indexation controls parsed early by goog meta, canonical, and
- 105Structured Data & JSON-LD
structured data & json-ld structured data via json-ld encodes entity semantics for google search rich resu structured data (json-ld) tells
- 106Hreflang & International SEO
hreflang & international seo hreflang in html head (or sitemap) tells google search which locale url to serve hreflang tells
- 107Crawl Budget & Indexation
crawl budget & indexation crawl budget and indexation engineering shapes google's fetch priority through h crawl budget and indexation engineering
- 108Open Graph & Social SEO
open graph & social seo open graph and social meta tags engineer link preview behavior on slack, linkedi open graph
- 109HTML SEO Audit Checklist
html seo audit checklist html seo audit checklist operationalizes google search requirements into automat html seo audit checklist is the
Accessibility Engineering
- 110Accessibility Engineering Overview
accessibility engineering overview accessibility engineering treats wcag 2.2 conformance as a production requiremen accessibility engineering embeds wcag 2.2 conformance into
- 111WCAG Conformance & Testing
wcag conformance & testing wcag 2.2 conformance testing maps w3c success criteria to html implementations — wcag 2.2 conformance defines
- 112Semantic HTML for Accessibility
semantic html for accessibility semantic html for accessibility delivers implicit roles, keyboard support, and s semantic html is the highest-roi
- 113ARIA Architecture
aria architecture aria architecture extends html semantics for complex widgets when native element aria architecture layers accessible names, roles, states,
- 114Keyboard & Focus Management
keyboard & focus management keyboard and focus management delivers wcag operability through skip links, logi keyboard and focus management ensures
- 115Screen Reader Testing
screen reader testing screen reader testing validates html and aria against real assistive technology screen reader testing validates what
- 116Accessible Forms in Production
accessible forms in production accessible forms in production combine semantic html labels, grouped fieldsets, accessible forms in production require
Frontend Security
- 117Frontend Security Overview
frontend security overview frontend security in html applies owasp encoding, csp, form protections, and san frontend security in html defines
- 118XSS & HTML Injection
xss & html injection xss and html injection exploit insufficient encoding in html parsing contexts — xss and html
- 119CSRF & Form Security
csrf & form security csrf and form security harden html forms with synchronizer tokens, post-only mut csrf and form security
- 120Content Security Policy
content security policy content security policy restricts html-loaded script and resource origins — owas content security policy (csp) is an
- 121Iframe Sandbox & Clickjacking
iframe sandbox & clickjacking iframe sandbox and clickjacking defenses isolate untrusted html embeds and preve iframe sandbox and clickjacking defense
- 122HTML Sanitization
html sanitization html sanitization applies owasp allowlist policies via maintained libraries like html sanitization allowlists safe tags and attributes when
Modern Frontend Architecture
- 123Modern Frontend Architecture
modern frontend architecture modern frontend architecture balances static html, ssr, and client rendering per modern frontend architecture is the contract
- 124Progressive Enhancement
progressive enhancement progressive enhancement treats semantic html as the reliability layer and javasc progressive enhancement builds experiences from a baseline
- 125Islands & Partial Hydration
islands & partial hydration islands and partial hydration deliver seo-friendly static html while attaching j islands architecture and partial hydration
- 126Micro-Frontends Document Shell
micro-frontends document shell micro-frontend architecture lives or dies on the document shell: unified head po micro-frontends split a product across
- 127Design Systems & Markup Contracts
design systems & markup contracts design system markup contracts specify the html each component emits — enabling design system
- 128SSR & Hydration Markup
ssr & hydration markup ssr and hydration markup engineering ensures server html matches client expectat ssr hydration markup is the
Enterprise Frontend Systems
- 129Enterprise Frontend Systems
enterprise frontend systems enterprise frontend systems govern html delivery across teams and properties via enterprise frontend systems coordinate dozens of
- 130CMS HTML Templates
cms html templates cms html templates translate structured content into design-system-compliant, sa cms html templates are the bridge between marketer-authored
- 131i18n & RTL Markup
i18n & rtl markup i18n and rtl markup requires correct lang/dir on the document root, hreflang alt i18n and rtl
- 132Transactional Email HTML
transactional email html transactional email html requires table-based layouts, inline styles, client tes transactional email html is a parallel frontend:
- 133Print & PDF HTML
print & pdf html print and pdf html uses paged media css, semantic tables with repeat headers, pr print and
- 134Regulated Industries Markup
regulated industries markup regulated industries markup encodes legal disclosures, accessible consent, templ regulated industries markup — healthcare (hipaa), finance (pci,
Production Case Studies
- 135Case Study: Google Search HTML
case study: google search html google search html demonstrates server-rendered semantic results, strict encodin google search is the canonical example
- 136Case Study: Shopify Checkout
case study: shopify checkout shopify checkout html shows how commerce platforms secure and optimize revenue-c shopify checkout is revenue-critical html:
- 137Case Study: Airbnb SEO Markup
case study: airbnb seo markup airbnb seo markup teaches programmatic listing html with quality-gated indexabil airbnb depends on organic discovery
- 138Case Study: Stripe Docs Performance
case study: stripe docs performance stripe docs performance html demonstrates static generation, semantic reference stripe docs set industry bar
- 139Case Study: BBC News Accessibility
case study: bbc news accessibility bbc news accessibility markup embeds gel semantics in cms templates — mandatory bbc news