What's New in HTML: Recent Additions Explained

HTML has a reputation for being the 'boring' part of the web stack — something you learn once and forget about. That reputation is outdated. Between 2022 and 2025, the HTML spec received more meaningful new elements and APIs than in the previous decade combined.

This is largely driven by the Web Components ecosystem maturing and browsers finally converging on a shared implementation of features that existed in draft form for years. The result: native solutions to problems that previously required JavaScript libraries or workarounds.

In this guide, we walk through the most important HTML additions and show you how to use them today.

The Popover API is perhaps the most practically useful addition. It gives any HTML element built-in show/hide behavior, focus management, top-layer rendering, and light-dismiss — without a single line of JavaScript.

<button popovertarget="my-menu">Open Menu</button>

<div id="my-menu" popover>
  <p>I appear above everything else, without z-index hacks!</p>
  <button popovertarget="my-menu" popovertargetaction="hide">Close</button>
</div>

The `popover` attribute opts the element into the top layer — a special rendering context that floats above all other content, including modals. The browser handles Escape to dismiss, focus trapping, and accessibility automatically.

The `popover` attribute has two modes: `popover="auto"` (default, auto-dismiss on outside click) and `popover="manual"` (stays open until explicitly dismissed).

The `<dialog>` element brings native modal support to HTML. It has been in the spec since 2013 but only reached full cross-browser support in 2022 with Firefox 98.

<dialog id="confirm-dialog">
  <h2>Are you sure?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm" autofocus>Confirm</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('confirm-dialog');
  document.querySelector('#open-btn').addEventListener('click', () => {
    dialog.showModal();
  });
  dialog.addEventListener('close', () => {
    console.log('User chose:', dialog.returnValue);
  });
</script>

Key behaviors: `showModal()` opens a dialog with a backdrop and focus trap. The `::backdrop` pseudo-element lets you style the overlay. `form[method="dialog"]` submits a return value without a server request, available via `dialog.returnValue`. This eliminates the need for most modal libraries.

The `<search>` element was added in 2023 as a semantic landmark for search regions. It's the HTML-native equivalent of `role="search"`.

<!-- Before -->
<div role="search">
  <input type="search" placeholder="Search...">
  <button>Search</button>
</div>

<!-- After: HTML-native -->
<search>
  <input type="search" placeholder="Search..." aria-label="Site search">
  <button>Search</button>
</search>

Search regions now have a proper semantic element, improving discoverability for screen readers and search engines alike. The element is display: block by default with no default styling — drop it in and style it as you would a `<div>`.

Browser support: Chrome 118+, Firefox 118+, Safari 17+. Full coverage in modern browsers.

The `<details>` and `<summary>` elements have been available for years but are often overlooked. They provide a fully native, no-JavaScript accordion pattern.

<details>
  <summary>What is CSS clamp()?</summary>
  <p>CSS clamp() constrains a value between an upper and lower bound, enabling fluid typography without media queries.</p>
</details>

The browser handles open/close toggling, keyboard interaction, and ARIA semantics automatically. The `open` attribute controls state programmatically.

A recent upgrade (2024): the `name` attribute on `<details>` groups multiple accordions, ensuring only one is open at a time — the HTML-native exclusive accordion:

<details name="faq"><summary>Question 1</summary>...</details>
<details name="faq"><summary>Question 2</summary>...</details>
<details name="faq"><summary>Question 3</summary>...</details>

With `name="faq"`, opening any one detail closes the others — a radio-style accordion. No JavaScript required.

The `<template>` element holds HTML fragments that are inert — not rendered, not executed — until cloned into the live DOM. It's the foundation of Web Components.

<template id="card-template">
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

<my-card>
  <h2 slot="title">Card Title</h2>
  <p slot="content">Card body text.</p>
</my-card>

`<slot>` elements are placeholders inside a Shadow DOM component that get filled with the component's light-DOM children. Named slots (using `name` and `slot` attributes) enable precise content projection — the web's native answer to Angular's `ng-content` or React's `children`.

1. Using `<dialog>` without `showModal()` Calling `dialog.show()` opens a non-modal dialog — no backdrop, no focus trap. For a modal experience, always use `dialog.showModal()`.

2. Forgetting `autofocus` in dialogs Without `autofocus`, focus lands on the dialog element itself, not a useful child. Add `autofocus` to the primary action button.

3. Skipping `aria-label` on search inputs inside `<search>` The `<search>` element doesn't label its children. The inner `<input type="search">` still needs an accessible label.

4. Using `<details>` without checking animation support The `::details-content` pseudo-element (Chrome 131+) enables animating the open/close, but requires a feature flag. Use a CSS transition on `max-height` as a fallback for older browsers.

5. Misusing the Popover API's top layer The top layer bypasses z-index stacking entirely. Don't rely on z-index to control popover stacking — use the DOM order instead.

1. Prefer native over library — if a browser API covers your use case, use it. `<dialog>` replaces 80% of modal library use cases. 2. Progressively enhance — the Popover API falls back gracefully in older browsers; `<details>` works everywhere. 3. Test with assistive technology — new elements come with new ARIA semantics. Verify behavior with VoiceOver or NVDA. 4. Check caniuse.com — browser support for these features varies. Target your audience's browsers before shipping. 5. Use `<search>` as a landmark — screen reader users navigate by landmarks. `<search>` is a first-class landmark alongside `<main>`, `<nav>`, and `<aside>`.

Is the Popover API stable? Yes. It reached Baseline status in 2024 and is supported in all modern browsers without flags.

Should I still use JavaScript modal libraries? For simple use cases, no. `<dialog>` with `showModal()` covers most needs. Libraries add value for complex animations, multiple stacked modals, or rich toast/notification systems.

What is Baseline? Baseline is a cross-browser compatibility signal. A feature achieves 'Baseline Newly Available' when it lands in all major browsers, and 'Baseline Widely Available' after 2.5 years of support — suitable for all audiences.

Can I use these features in a React/Vue/Angular app? Yes. HTML elements work in any framework. The Popover API and `<dialog>` are especially easy to integrate — they're imperative APIs that work alongside declarative frameworks.