HTML Can Do That

An interactive tour of native browser capabilities — no frameworks, no build step.

Scroll to explore ↓
01 — Semantic HTML

Structure with Meaning

HTML5 semantic elements give your markup meaning beyond <div> soup. Hover over each region to see which tag it represents.

Site title, logo, and top-level navigation live here.
Links, menus, breadcrumbs — wrapped in <nav> for accessibility.
The primary content area. Each blog post or page section can be an <article> with its own <header> and <footer>.
Side content: related links, tags, author bio. Screen readers announce it differently.
Copyright, secondary nav, contact info. Semantically distinct from the body.
02 — Native Forms

Inputs for Everything

HTML provides dozens of input types with built-in validation, date pickers, sliders, color pickers — all without JavaScript.

T Text Inputs

Try submitting an invalid email — the browser blocks it.
minlength="8" — browser enforces minimum.
<datalist> gives native autocomplete suggestions.

⚙ Rich Controls

60
#bf616a
Preference
03 — Disclosure Widgets

Details & Summary

Collapsible content with zero JavaScript — just native <details> and <summary>.

What is semantic HTML?
Semantic HTML uses elements like <article>, <section>, <nav>, and <aside> to describe the role of content, not just its appearance. This improves accessibility, SEO, and code readability.
Can I style <details> with CSS?
Yes — you can style the <summary> element, remove the default marker, add transitions, and create accordion-style interfaces entirely without JavaScript. The [open] attribute lets you target the expanded state.
How does <details> affect accessibility?
Screen readers announce <details> as a disclosure widget. Users can toggle it with Enter or Space. The expanded/collapsed state is communicated automatically, making it a great accessible pattern out of the box.
This one starts open
Adding the open attribute to <details> makes it expanded by default. Users can still collapse it. This is useful for showing important content that people can dismiss.
04 — Native Dialog

Modal Without a Library

The <dialog> element provides a native modal with backdrop, focus trapping, and escape-to-close — built into the browser.

Native Dialog

This is a real <dialog> element opened with .showModal(). It traps focus, adds a backdrop, and closes with Escape. No library needed.

Popover API

This uses the new popover attribute — no JS event listeners needed. Click anywhere outside to dismiss.

05 — Multimedia

Audio, Video & Images

Native <audio>, <video>, and responsive <picture> elements handle media without plugins.

Native Audio Player

Built-in play/pause, volume, seek, and download — with the controls attribute.

Responsive Picture

Responsive demo

<picture> lets you serve different images by viewport, format, or resolution.

Lazy Loading

Lazy loaded

One attribute: loading="lazy". The browser handles the rest.

06 — Data Tables

Structured Data Display

Native HTML tables with semantic <thead>, <tbody>, <tfoot>, and sortable columns via JavaScript.

Element ↕ Category ↕ Status ↕ Since
<dialog>InteractiveStableHTML5.2
<details>DisclosureStableHTML5
<picture>MediaStableHTML5
<datalist>FormsStableHTML5
[popover]InteractiveNew2023
<search>SemanticNew2023
07 — Canvas API

Draw Anything

The <canvas> element gives you a pixel-level drawing surface. Draw, paint, and animate with the 2D context API.

08 — Drag & Drop

Native Drag & Drop

HTML5 Drag and Drop API — no library required. Drag items between columns to reorder.

To Do

Research HTML APIs
Build demo page
Write documentation

In Progress

Style components

Done

Set up project
09 — Inline SVG

Vector Graphics in HTML

SVG lives directly in your markup — scalable, styleable with CSS, and animatable. Hover over the shapes.

ANIMATED STROKED PATH DRAW
10 — Meters & Progress

Native Indicators

<progress> for task completion, <meter> for scalar measurements. Both semantic and accessible.

Progress Bars

0%

Meters

85%
72%
88°