HTML APIs

Course 2 · Ch 8
HTML APIs Overview
template, details/summary, and dialog — modern elements that replace JavaScript-heavy patterns with native browser behaviour

Modern HTML has steadily absorbed UI patterns that used to require significant JavaScript — collapsible sections, modal dialogs, reusable markup fragments. This chapter covers three elements that genuinely reduce how much custom code a typical interactive page needs.

details and summary — Native Collapsible Content

<details> <summary>What's included in the course?</summary> <p>12 chapters covering everything from basics to a real project build.</p> </details>
What's included in the course?

12 chapters covering everything from basics to a real project build.

Is it free?

Yes, completely free.

No JavaScript at all — click the <summary> text and the rest of the content toggles visible/hidden, with built-in keyboard support (Enter/Space) and correct screen reader announcement of the expanded/collapsed state, directly connecting to Chapter 6's aria-expanded coverage — except here, the browser itself manages that state automatically.

// Open by default, instead of collapsed <details open> <summary>...</summary> </details>
A classic, real-world use: an entirely JavaScript-free FAQ accordion
A series of <details> elements, each with its own question in <summary> and the answer beneath, produces a fully functional, accessible FAQ accordion with zero JavaScript — exactly the kind of interactive pattern this chapter's elements exist to simplify.

The dialog Element — Native Modal Dialogs

<dialog id="confirmDialog"> <p>Are you sure you want to delete this item?</p> <button onclick="document.getElementById('confirmDialog').close()">Cancel</button> </dialog> <button onclick="document.getElementById('confirmDialog').showModal()">Delete</button>

<dialog> is hidden by default; calling .showModal() via JavaScript displays it as a genuine modal — automatically including a semi-transparent backdrop, trapping keyboard focus inside the dialog (so Tab can't accidentally reach content behind it), and closing on the Escape key, all built into the browser.

Before dialog existed, "modal" was almost always a hand-built div with significant JavaScript
Focus trapping, backdrop click handling, Escape-key closing, and correct ARIA roles all had to be implemented manually for a custom modal — and were genuinely easy to get subtly wrong, especially for keyboard/screen reader users. <dialog> handles the correct behaviour by default, which is exactly why it's worth preferring over a hand-rolled equivalent whenever a genuine modal is needed.

showModal() vs show()

.showModal()
True modal behaviour — backdrop, focus trapping, blocks interaction with the rest of the page until closed.
.show()
Non-modal display — no backdrop, no focus trapping, the rest of the page remains fully interactive. Rarely what's actually wanted for a typical "modal" use case.

The template Element — Inert, Reusable Markup

<template id="productCardTemplate"> <div class="product-card"> <h3></h3> <p class="price"></p> </div> </template> // JavaScript clones the template's content as needed: const tpl = document.getElementById('productCardTemplate'); const clone = tpl.content.cloneNode(true); // ...fill in the clone's content, then append it to the page

Content inside <template> is parsed by the browser but never rendered or executed (images don't load, scripts don't run) until explicitly cloned and inserted into the document via JavaScript — a genuinely useful pattern for repeated UI structures (a card layout, a list item) built once and stamped out multiple times with different data.

Comparing the Pre-Built-By-The-Browser Approach

  • Without template: building the same HTML structure repeatedly via string concatenation or innerHTML assignments in JavaScript — error-prone, and risks the same kind of escaping mistakes covered in Fundamentals Chapter 11's XSS warning if any of the inserted data comes from user input.
  • With template: the structure lives as real, validatable HTML; JavaScript just clones it and fills in the blanks — generally safer and easier to maintain.

Chapter 8 Quick Reference

  • details/summary — native, JavaScript-free collapsible content with built-in keyboard and accessibility support
  • details open — starts expanded instead of collapsed
  • dialog + showModal() — native modal: backdrop, focus trapping, Escape-to-close, all built in
  • show() vs showModal() — show() has no backdrop/focus trapping, rarely what's wanted for a true modal
  • template — inert markup, never rendered until cloned via JavaScript; safer/cleaner than building HTML via string concatenation
  • All three reduce custom JavaScript for patterns that used to require it entirely
  • Next chapter: microdata & structured data (schema.org) for SEO