The Best HTML Tricks of 2026 – Features You Should Be Using As Of Right Now

<button popovertarget="user-menu">Account</button>

<div popover id="user-menu" class="floating-menu">
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
  <button popovertarget="user-menu" popovertargetaction="hide">Close</button>
</div>

<details name="faq-group">
  <summary>Can I use this in 2026?</summary>
  <p>Yes – 96%+ global coverage (Jan 2026)</p>
</details>

<details name="faq-group">
  <summary>Is it only one open at a time?</summary>
  <p>Yes – when they share the same name!</p>
</details>

<details name="faq-group">
  <summary>What about multiple independent groups?</summary>
  <p>Just use different name values 😎</p>
</details>

<input type="text" list="frameworks" placeholder="Pick a framework…" autocomplete="on">

<datalist id="frameworks">
  <option value="React">React 19 / Next.js 15</option>
  <option value="Vue">Vue 3.5 + Vapor Mode</option>
  <option value="Svelte">Svelte 5 runes everywhere</option>
  <option value="Solid">SolidStart 1.0</option>
  <option value="Astro">Astro 5 islands</option>
  <option value="Qwik">Qwik City resumability</option>
</datalist>

<dialog id="welcome">
  <article>
    <h2>Welcome to 2026! 🎉</h2>
    <p>This dialog was opened with <code>showModal()</code></p>
    
    <form method="dialog">
      <button value="cancel">Cancel</button>
      <button value="ok" autofocus>Got it!</button>
    </form>
  </article>
</dialog>

@container (inline-size > 420px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: #eee;
  }
}

<div class="card" style="--theme: dark">
  <!-- will use dark styles automatically -->
</div>