Advanced HTML

Browser-managed panels, components, scripts, and graphics.

Browser-managed panels

Pick a nonmodal panel or dialog for the actual task.

• HTML popover: show dismissible nonmodal help with a button
• HTML form method=dialog: close a decision panel without a network request
• HTML hidden until found: let search reveal deferred text
• HTML manual popover: keep a nonmodal panel open until a deliberate close
• HTML dialog commands: open and request close with named buttons
• HTML dialog closedby: choose whether outside clicks dismiss a panel

Component boundaries

Preserve fallback content as custom elements and shadow trees upgrade.

• HTML custom elements: preserve useful text before upgrade
• HTML declarative shadow DOM: parse a component boundary from markup
• HTML slots: assign light-DOM content and keep a fallback
• HTML form-associated custom elements: join the form contract deliberately

Scripts and embedded data

Keep module names, script data, and load order under control.

• HTML module scripts: load one module without ordering every classic script
• HTML import maps: resolve a module name to a controlled local file
• HTML script data: escape serialized values at the boundary
• HTML modulepreload: fetch a known module before its import is discovered

Graphics

Retain the underlying information when drawing to a bitmap.

• HTML canvas: draw a chart without hiding its underlying data

Common Mistakes

Each lesson explains a browser contract. An illustrative asset or endpoint is not a deployed service until its owner supplies and verifies it.