The skeleton of every web page. It defines structure and content — and modern HTML can validate, autocomplete, show popovers and more, all on its own.
Attributes like required, type="email", pattern and min make the browser validate the form for you. Submit it empty or with a bad email — the browser blocks it and explains why.
<input type="email" required> <input type="text" pattern="\d{4}" required> <input type="number" min="18" max="99">
HTML gives you specialised inputs that bring their own UI — date pickers, colour pickers, sliders. Try them; they're all native.
Bind an <input> to a <datalist> and the browser offers suggestions as you type — no JavaScript.
The popover attribute and <details> element give you toggles and modals with pure HTML.
This popover opened with popovertarget — a single HTML attribute, zero JavaScript.
Using the right element for the job — <nav>, <article>, <button> — so browsers, screen readers and search engines understand your page.
Good structure means accessibility, SEO and styling all become easier. CSS and JS are layered on top of solid HTML.
Built-in elements for showing data — <progress>, <meter> and the humble <table>.
Upload progress:
Disk usage:
| Element | Purpose |
|---|---|
| <header> | Top of a page or section |
| <main> | The primary content |
| <footer> | Closing content |
datalist, the popover attribute, details, progress/meter, table) with no JavaScript. The page's colours and spacing come from the shared CSS shell.