html

    HTML Course

    Structure the content of every web page.

    139
    Lessons
    15
    Modules
    0/139
    Completed

    Architecture

    From Markup to Pixels

    The browser pipeline: parse HTML, build the DOM, combine with CSSOM, layout, and paint.

    HTML
    bytes
    parse
    DOM Tree
    nodes
    CSSOM
    styles
    Render Tree
    visible
    layout
    Layout
    boxes
    paint
    Pixels
    screen
    <head>
    metadata, links, scripts
    <body>
    visible content tree
    Semantic
    <header> <main> <article>
    A11y
    ARIA + landmarks
    Curriculum

    Enterprise learning path

    15 modules · 139 lessons

    HTML Tutorial

    0/40 complete
    1. 1
      HTML HOME
      Next up

      html home premium browser rendering core web vitals seo accessibility security enterprise frontend

    2. 2
      HTML Introduction

      html introduction html introduces the document contract that browsers, google, and assistive techn html is not a presentation language —

    3. 3
      HTML Editors

      html editors html editors shape what ships. staff engineers own the full pipeline — formattin html editors — vs code,

    4. 4
      HTML Basic

      html basic basic html defines the minimal interoperable document. staff engineers enforce s basic html is the smallest valid document

    5. 5
      HTML Elements

      html elements html elements define structure through content models and semantics. staff engin html elements are vocabulary with content models

    6. 6
      HTML Attributes

      html attributes attributes configure behavior, accessibility, seo, and loading. staff engineers attributes configure elements — href, src, alt, aria-*,

    7. 7
      HTML Headings

      html headings heading elements structure content for accessibility, seo, and human scanability heading elements (h1–h6) are the primary structural signals

    8. 8
      HTML Paragraphs

      html paragraphs the paragraph element is the interoperable unit for body copy. production conten paragraphs (&lt;p&gt;) are the default prose

    9. 9
      HTML Styles

      html styles inline styles are a legacy escape hatch for email and edge cases. production web inline styles via the

    10. 10
      HTML Formatting

      html formatting text formatting elements encode emphasis and ancillary meaning in html. staff wr text formatting elements — strong, em,

    11. 11
      HTML Quotations

      html quotations quotation elements document provenance and structure cited content for users and quotation elements — blockquote, q, cite, footer

    12. 12
      HTML Comments

      html comments html comments annotate source for developers but ship to every client. productio html comments (&lt;!-- --&gt;) are parser

    13. 13
      HTML Colors

      html colors html color values bridge legacy presentation attributes and modern css. staff en html color values appear in legacy

    14. 14
      HTML CSS

      html css html integrates css through link, style, and inline attributes — each with casca html is the delivery vehicle

    15. 15
      HTML Links

      html links anchor elements connect the web — crawlers, users, and assistive technology all anchor elements (&lt;a href&gt;) are

    16. 16
      HTML Images

      html images images tie together accessibility, seo image search, and core web vitals. staff the img element embeds raster

    17. 17
      HTML Favicon

      html favicon favicon markup brands tabs, serps, and home screens with small head declarations favicon markup in &lt;head&gt; declares tab

    18. 18
      HTML Page Title

      html page title the title element names the document for browsers, assistive technology, and sea the &lt;title&gt; element sets document

    19. 19
      HTML Tables

      html tables semantic tables deliver accessible, crawlable, exportable tabular data. producti html tables represent tabular data — not page layout.

    20. 20
      HTML Lists

      html lists lists structure enumerable content for assistive technology, print, and search e list elements encode sequence and grouping semantically

    21. 21
      HTML Block & Inline

      html block & inline block and inline categories define document structure, parser behavior, and read html content categories — block-level

    22. 22
      HTML Div

      html div the div element is a non-semantic flow container for layout when no other elemen the div element is

    23. 23
      HTML Classes

      html classes the class attribute groups styling and scripting hooks across elements without s the class attribute assigns space-separated tokens

    24. 24
      HTML Id

      html id the id attribute provides document-unique hooks for fragments, form labels, and the id attribute must be unique

    25. 25
      HTML Buttons

      html buttons the button element is the native action control with type semantics, keyboard su the button element triggers actions

    26. 26
      HTML Iframes

      html iframes iframes embed isolated browsing contexts for payments, media, and untrusted widg iframes embed separate documents — sandboxed payment

    27. 27
      HTML JavaScript

      html javascript script elements orchestrate when javascript runs against dom construction. produ javascript in html — via &lt;script&gt; — controls

    28. 28
      HTML File Paths

      html file paths file path strings in html attributes resolve against document base and origin. p file paths in html

    29. 29
      HTML Head

      html head the head element orchestrates encoding, discovery hints, and document identity b the document head holds metadata, title, linked

    30. 30
      HTML Layout

      html layout semantic layout elements define document regions for users, assistive technology html layout uses semantic landmarks — header, nav,

    31. 31
      HTML Responsive

      html responsive responsive html declares viewport behavior and multi-resolution resources in mar responsive html starts with viewport configuration and responsive

    32. 32
      HTML Computercode

      html computercode code-related html elements mark programmatic text for assistive technology, copy computer code in html uses code, pre, kbd,

    33. 33
      HTML Semantics

      html semantics semantic html is the foundation of accessible, crawlable, maintainable documents html semantics assign meaning to markup — buttons

    34. 34
      HTML Style Guide

      html style guide html style guides align teams on markup that passes accessibility, seo, security an html style guide codifies

    35. 35
      HTML Entities

      html entities html entities escape syntactically significant characters and represent symbols html entities — &amp;lt;, &amp;amp;, numeric &amp;#x26a0; —

    36. 36
      HTML Symbols

      html symbols html symbols represent currency, math, and special characters in documents. prod html symbols — currency (£ € ¥),

    37. 37
      HTML Emojis

      html emojis emojis in html are standard unicode characters with cross-platform rendering and emojis in html are unicode characters —

    38. 38
      HTML Charsets

      html charsets character set declaration connects html bytes to readable text worldwide. global character encoding tells the browser how to

    39. 39
      HTML URL Encode

      html url encode url encoding makes safe links and form submissions across ascii-limited uri synt url encoding (percent-encoding) represents reserved

    40. 40
      HTML vs. XHTML

      html vs. xhtml html5 text/html won the open web; xhtml remains a legacy and specialized-format html vs xhtml —

    HTML Forms

    0/6 complete
    1. 41
      HTML Forms

      html forms the form element orchestrates control association, encoding, validation, and nav html forms are the browser's native contract for

    2. 42
      HTML Form Attributes

      html form attributes form attributes route and encode user intent. staff-level ownership means charse form attributes configure where data goes,

    3. 43
      HTML Form Elements

      html form elements form elements each carry submission, keyboard, and accessibility semantics. staf form elements are the control primitives browsers

    4. 44
      HTML Input Types

      html input types input types specialize browser behavior for each data shape. production teams ma input types switch the browser's

    5. 45
      HTML Input Attributes

      html input attributes input attributes encode validation, autofill, and accessibility metadata. staff input attributes bind dom controls to form

    6. 46
      Input 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

    0/2 complete
    1. 47
      HTML Canvas

      html canvas canvas separates tutorial demos from production engineering: explicit dimensions &lt;canvas&gt; is an immediate-mode bitmap surface — not a

    2. 48
      HTML SVG

      html svg svg is the production choice for icons, logos, and moderate data viz when access inline svg is vector

    HTML Media

    0/5 complete
    1. 49
      HTML Media

      html media html5 media elements are production streaming infrastructure: multi-source codec html5 media — &lt;video&gt;, &lt;audio&gt;, &lt;source&gt;, &lt;track&gt; — replaces

    2. 50
      HTML Video

      html video the video element is production streaming policy in markup: playsinline for ios, &lt;video&gt; is the visual half of

    3. 51
      HTML Audio

      html audio the audio element powers podcast, preview, and notification playback in producti &lt;audio&gt; delivers sound without a visual frame

    4. 52
      HTML Plug-ins

      html plug-ins html plug-in markup is legacy debt — flash and java taught the industry why sand html plug-ins —

    5. 53
      HTML YouTube

      html youtube youtube iframe embeds trade infrastructure cost for third-party weight — product youtube embeds via &lt;iframe src="https://www.youtube.com/embed/video_id"&gt; outsource encoding,

    HTML APIs

    0/6 complete
    1. 54
      HTML Web APIs

      html web apis web apis are production integration points — not magic: capability detection, pe web apis extend javascript beyond

    2. 55
      HTML Geolocation

      html geolocation geolocation powers local ux like google maps and uber — production engineering p geolocation api (navigator.geolocation) exposes device

    3. 56
      HTML 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

    4. 57
      HTML Web Storage

      html web storage web storage persists ux state synchronously per origin — production use is theme web storage — localstorage

    5. 58
      HTML Web Workers

      html web workers web workers keep main-thread inp healthy by isolating parse, search, and crypto web workers run javascript

    6. 59
      HTML 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

    0/13 complete
    1. 60
      HTML Certificate

      html certificate html completion credentials succeed when backed by assessed competencies, server html completion credentials are not vanity pdfs —

    2. 61
      HTML Examples

      html examples production html example galleries encode team conventions as runnable, tested do production html example patterns are curated, runnable

    3. 62
      HTML 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

    4. 63
      HTML Quiz

      html quiz html assessment quizzes discriminate engineering skill when built as accessible html assessment quizzes at staff level test

    5. 64
      HTML Exercises

      html exercises guided html exercises build production skill when grounded in realistic defectiv guided html exercises scaffold motor skill and

    6. 65
      HTML Challenges

      html challenges advanced html challenges train staff-level response: fix realistic broken docume advanced html challenges simulate staff-level fire drills: ship

    7. 66
      HTML Website

      html website multi-page html website architecture is information design plus a versioned temp multi-page html website architecture is the document

    8. 67
      HTML Syllabus

      html syllabus an html engineering syllabus sequences parser-to-production competencies with me html engineering syllabus maps competencies to outcomes — not

    9. 68
      HTML Study Plan

      html study plan structured html study plans convert syllabus competencies into timed, artifact-d structured html study plans translate syllabus into

    10. 69
      HTML Interview Prep

      html interview prep html interview preparation for staff loops emphasizes oral broken-markup review, html interview preparation at staff level means

    11. 70
      HTML Bootcamp

      html bootcamp html engineering bootcamps succeed when they front-load semantics, a11y, securit html engineering bootcamp intensity should produce job-ready document-layer

    12. 71
      HTML Summary

      html summary html engineering summary unifies the course around five lenses and the parser-to html engineering mental models compress the

    13. 72
      HTML Accessibility

      html accessibility html accessibility engineering prioritizes semantic structure, labeled forms, ke html accessibility engineering starts with semantic markup — not

    HTML References

    0/16 complete
    1. 73
      HTML Tag List

      html tag list html tag list reference powers enterprise lint contracts — tier a/b/c governance html tag vocabulary for lint

    2. 74
      HTML Attributes (Reference)

      html attributes (reference) html attributes reference feeds validation pipelines — global vs element-specifi html attribute reference for validation pipelines catalogs

    3. 75
      HTML Global Attributes

      html global attributes global html attributes cross-cut every element — enterprise teams govern id, cla global html attributes (id, class,

    4. 76
      HTML Browser Support

      html browser support html browser support reference powers progressive enhancement — tiered fallbacks html feature browser support matrices drive progressive

    5. 77
      HTML Events

      html events html events reference guides enterprise away from inline handlers toward csp-com html and dom event attributes (onclick inline,

    6. 78
      HTML Colors (Reference)

      html colors (reference) html colors reference connects named/hex/hsl values to enterprise token pipeline html color values in markup appear in

    7. 79
      HTML Canvas (Reference)

      html canvas (reference) canvas reference covers width/height markup, fallback content, role/aria pattern canvas element markup and attributes define the fallback

    8. 80
      HTML 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,

    9. 81
      HTML Doctypes

      html doctypes html doctypes reference enforces the single html5 declaration for standards mode html doctype declarations trigger standards mode in

    10. 82
      HTML Character Sets

      html character sets html character sets reference mandates utf-8 declaration in first 1024 bytes, ht html character encoding declarations (&lt;meta

    11. 83
      HTML 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

    12. 84
      HTML Lang Codes

      html lang codes lang codes reference documents bcp 47 on html/elements, hreflang alternate links bcp 47 language tags in html

    13. 85
      HTTP Messages

      http messages http messages reference links html documents to status codes, content-type chars http messages in relation to html connect

    14. 86
      HTTP Methods

      http methods http methods reference ties html form method/action/enctype to get idempotent se http methods in html form markup (get

    15. 87
      PX to EM Converter

      px to em converter px to em/rem reference provides conversion math for typography handoff, recommen px to em rem conversion

    16. 88
      Keyboard Shortcuts

      keyboard shortcuts keyboard shortcuts reference documents engineer devtools and screen reader short keyboard shortcuts for html engineering workflows accelerate devtools,

    Browser Rendering Engine

    0/8 complete
    1. 89
      Browser 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,

    2. 90
      HTML Tokenization & Parsing

      html tokenization & parsing html tokenization converts bytes to tokens; the tree builder constructs dom per html tokenization is

    3. 91
      DOM Construction

      dom construction dom construction builds the live tree consumed by style, layout, ax, and scripts dom construction builds the live

    4. 92
      CSSOM & Render Tree

      cssom & render tree cssom and render tree connect dom to layout. blink, webkit, and gecko recalculat cssom and render

    5. 93
      Layout, Paint & Composite

      layout, paint & composite layout, paint, and composite transform styled dom into frames. the chrome team d layout, paint, and

    6. 94
      Critical Rendering Path

      critical rendering path the critical rendering path names engine stages and gating resources from first the critical rendering path

    7. 95
      Reflow & Repaint

      reflow & repaint reflow and repaint are main-thread layout and paint invalidations that cause jan reflow (layout) recalculates geometry when

    8. 96
      Compositor Layers & GPU

      compositor layers & gpu compositor layers and gpu compositing decouple scroll and transform animation fr compositor layers split page content

    Core Web Vitals

    0/6 complete
    1. 97
      Core Web Vitals Overview

      core web vitals overview core web vitals standardize loading, interactivity, and visual stability for rea core web vitals are google's

    2. 98
      Largest Contentful Paint (LCP)

      largest contentful paint (lcp) largest contentful paint captures when main content becomes visible. chrome team largest contentful paint (lcp) marks

    3. 99
      Interaction to Next Paint (INP)

      interaction to next paint (inp) interaction to next paint captures full responsiveness from input to visual upda interaction to next

    4. 100
      Cumulative Layout Shift (CLS)

      cumulative layout shift (cls) cumulative layout shift captures visual instability from layout changes. chrome cumulative layout shift (cls) quantifies

    5. 101
      RUM, CrUX & Field Data

      rum, crux & field data rum and crux provide real-user performance data complementing lab lighthouse. th rum (real user monitoring)

    6. 102
      Performance 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

    0/7 complete
    1. 103
      Advanced SEO Engineering Overview

      advanced seo engineering overview advanced seo engineering owns the html surface google search indexes: complete h advanced seo engineering treats

    2. 104
      Meta, Canonical & Robots

      meta, canonical & robots meta robots and link canonical are html indexation controls parsed early by goog meta, canonical, and

    3. 105
      Structured 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

    4. 106
      Hreflang & International SEO

      hreflang & international seo hreflang in html head (or sitemap) tells google search which locale url to serve hreflang tells

    5. 107
      Crawl Budget & Indexation

      crawl budget & indexation crawl budget and indexation engineering shapes google's fetch priority through h crawl budget and indexation engineering

    6. 108
      Open Graph & Social SEO

      open graph & social seo open graph and social meta tags engineer link preview behavior on slack, linkedi open graph

    7. 109
      HTML 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

    0/7 complete
    1. 110
      Accessibility Engineering Overview

      accessibility engineering overview accessibility engineering treats wcag 2.2 conformance as a production requiremen accessibility engineering embeds wcag 2.2 conformance into

    2. 111
      WCAG Conformance & Testing

      wcag conformance & testing wcag 2.2 conformance testing maps w3c success criteria to html implementations — wcag 2.2 conformance defines

    3. 112
      Semantic HTML for Accessibility

      semantic html for accessibility semantic html for accessibility delivers implicit roles, keyboard support, and s semantic html is the highest-roi

    4. 113
      ARIA Architecture

      aria architecture aria architecture extends html semantics for complex widgets when native element aria architecture layers accessible names, roles, states,

    5. 114
      Keyboard & Focus Management

      keyboard & focus management keyboard and focus management delivers wcag operability through skip links, logi keyboard and focus management ensures

    6. 115
      Screen Reader Testing

      screen reader testing screen reader testing validates html and aria against real assistive technology screen reader testing validates what

    7. 116
      Accessible Forms in Production

      accessible forms in production accessible forms in production combine semantic html labels, grouped fieldsets, accessible forms in production require

    Frontend Security

    0/6 complete
    1. 117
      Frontend Security Overview

      frontend security overview frontend security in html applies owasp encoding, csp, form protections, and san frontend security in html defines

    2. 118
      XSS & HTML Injection

      xss & html injection xss and html injection exploit insufficient encoding in html parsing contexts — xss and html

    3. 119
      CSRF & Form Security

      csrf & form security csrf and form security harden html forms with synchronizer tokens, post-only mut csrf and form security

    4. 120
      Content Security Policy

      content security policy content security policy restricts html-loaded script and resource origins — owas content security policy (csp) is an

    5. 121
      Iframe Sandbox & Clickjacking

      iframe sandbox & clickjacking iframe sandbox and clickjacking defenses isolate untrusted html embeds and preve iframe sandbox and clickjacking defense

    6. 122
      HTML Sanitization

      html sanitization html sanitization applies owasp allowlist policies via maintained libraries like html sanitization allowlists safe tags and attributes when

    Modern Frontend Architecture

    0/6 complete
    1. 123
      Modern Frontend Architecture

      modern frontend architecture modern frontend architecture balances static html, ssr, and client rendering per modern frontend architecture is the contract

    2. 124
      Progressive Enhancement

      progressive enhancement progressive enhancement treats semantic html as the reliability layer and javasc progressive enhancement builds experiences from a baseline

    3. 125
      Islands & Partial Hydration

      islands & partial hydration islands and partial hydration deliver seo-friendly static html while attaching j islands architecture and partial hydration

    4. 126
      Micro-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

    5. 127
      Design Systems & Markup Contracts

      design systems & markup contracts design system markup contracts specify the html each component emits — enabling design system

    6. 128
      SSR & Hydration Markup

      ssr & hydration markup ssr and hydration markup engineering ensures server html matches client expectat ssr hydration markup is the

    Enterprise Frontend Systems

    0/6 complete
    1. 129
      Enterprise Frontend Systems

      enterprise frontend systems enterprise frontend systems govern html delivery across teams and properties via enterprise frontend systems coordinate dozens of

    2. 130
      CMS 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

    3. 131
      i18n & RTL Markup

      i18n & rtl markup i18n and rtl markup requires correct lang/dir on the document root, hreflang alt i18n and rtl

    4. 132
      Transactional Email HTML

      transactional email html transactional email html requires table-based layouts, inline styles, client tes transactional email html is a parallel frontend:

    5. 133
      Print & PDF HTML

      print & pdf html print and pdf html uses paged media css, semantic tables with repeat headers, pr print and

    6. 134
      Regulated Industries Markup

      regulated industries markup regulated industries markup encodes legal disclosures, accessible consent, templ regulated industries markup — healthcare (hipaa), finance (pci,

    Production Case Studies

    0/5 complete
    1. 135
      Case 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

    2. 136
      Case 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:

    3. 137
      Case 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

    4. 138
      Case Study: Stripe Docs Performance

      case study: stripe docs performance stripe docs performance html demonstrates static generation, semantic reference stripe docs set industry bar

    5. 139
      Case Study: BBC News Accessibility

      case study: bbc news accessibility bbc news accessibility markup embeds gel semantics in cms templates — mandatory bbc news