Discover native features you never knew existed

HTML Can Do That

Inspired by Chris Burnell

2024

02

Hidden Capabilities

Native HTML features that eliminate JavaScript dependencies

Surprising Native Features

chat_bubble

<dialog>

Native modals with built-in backdrop and focus management

expand_more

<details>

Collapsible content without a single line of JavaScript

speed

<meter> & <progress>

Visual gauges and loading indicators built-in

list

<datalist>

Autocomplete suggestions for input fields

calculate

<output>

Display calculated results from form inputs

edit_calendar

Date Inputs

Native date pickers, no libraries required

Interactive Without JavaScript

index.html

<!-- Native accordion -->
<details open>
  <summary>Click to expand</summary>
  <p>Content appears here!</p>
</details>

<!-- Native modal dialog -->
<dialog id="modal">
  <h2>Hello World</h2>
  <button onclick="modal.close()">Close</button>
</dialog>
<button onclick="modal.showModal()">
  Open Modal
</button>

HTML elements with built-in interactivity and accessibility

05

Why It Matters

The case for native solutions

Native HTML vs JavaScript

Native HTML Recommended
Zero dependencies
Built-in accessibility
Faster load times
Less code to maintain

JavaScript Approach

Large bundle sizes
Manual a11y handling
More complexity
Potential bugs

"The best code is no code at all.
Every line of code you write is a line that has to be debugged, maintained, and understood."

Jeff Atwood

Thank You

Explore native HTML before reaching for JavaScript

Source: chrisburnell.com/html-can-do-that