HTML defines structural hooks; Web APIs extend the browser with programmable capabilities—storage, networking, rendering, sensors, cryptography hooks, and more.
Relationship to markup
- Elements like
canvas,video, or form controls expose DOM interfaces consumed by JavaScript. - Security contexts (HTTPS, permissions policies) gate sensitive APIs.
Examples (non-exhaustive)
- Fetch / XMLHttpRequest for HTTP.
- WebSockets / WebRTC for realtime communication.
- IndexedDB / Cache Storage for structured offline data.
- Intersection Observer for lazy behaviors.
Continue on the JavaScript track for execution patterns—here you learn how markup enables those APIs.
Progressive enhancement
Detect API availability before calling; degrade gracefully when browsers lack features.
Fence-sitting that fails audits
- Feature detecting then quietly no-oping without user messaging—users think the app is broken.
- Permissions Policies / Feature Policy misconfiguration blocking camera/mic/geo in iframes unexpectedly—test embed contexts.
HTML is the contract with the platform
Even when logic lives in WASM or workers, declarative markup lists focusable surfaces, exposes names to OS automation, and enables reader mode parsers—cheap to break, expensive to reclaim trust.
API ↔ markup map (examples)
| Markup | Typical APIs |
|---|---|
canvas, video | CanvasRenderingContext2D, HTMLMediaElement |
form, input | FormData, constraint validation, requestSubmit |
dialog, details | HTMLDialogElement, disclosure events |
Global navigator, window | Storage, clipboard, permissions, workers |
Feature detection pattern
if (!('IntersectionObserver' in window)) {
// load polyfill or simplified path
}Rendered output (HTML hooks APIs attach to)
canvas, form, and media elements are declarative hooks; JavaScript APIs add behavior after feature checks.
Important interview questions and answers
- Q: What does progressive enhancement mean in API-driven pages?
A: Core tasks should work with baseline HTML first, then richer APIs enhance experience when supported. - Q: Why is feature detection better than browser sniffing?
A: It checks actual capability, avoids brittle UA assumptions, and degrades gracefully. - Q: What is the first accessibility check before shipping any page?
A: Verify keyboard-only task completion with visible focus and meaningful accessible names.
Next: APIs need JavaScript—continue on the JavaScript track.