26 changes · 0 breaking
01Strict, Transitional, Frameset doctypesHTML 4.01

Three variants controlled which features were allowed.

javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
02Tables for layoutHTML 4.01

The dominant layout technique before CSS — deeply nested tables for columns and spacing.

03Presentational attributesHTML 4.01

font, bgcolor, align, border mixed structure with presentation.

javascript
<font face="Arial" color="red">Text</font>
04FormsHTML 4.01

Basic input types (text, checkbox, radio, select, textarea), form actions and methods.

05XML syntax rulesXHTML 1.0

All tags must be closed, attributes quoted, elements lowercase. Stricter authoring than HTML 4.

javascript
<!-- XHTML requires closing slash on void elements -->
<br />
<img src="photo.jpg" alt="Photo" />
06Served as text/htmlXHTML 1.0

Most XHTML 1.0 pages were served with the HTML MIME type, processed by the HTML parser.

07Simple DOCTYPEHTML5

The doctype triggers standards mode and is not versioned.

javascript
<!DOCTYPE html>
08Semantic ElementsHTML5

New structural elements: header, nav, main, article, section, aside, footer, figure, figcaption.

javascript
<main>
  <article>
    <header><h1>Title</h1></header>
    <section>Content</section>
    <footer>Byline</footer>
  </article>
</main>
09Native MultimediaHTML5

video and audio elements with source fallbacks — no Flash plugin needed.

javascript
<video controls>
  <source src="clip.mp4" type="video/mp4" />
</video>
10Canvas APIHTML5

2D drawing surface via JavaScript. Foundation for games, data visualizations, and image editing.

javascript
<canvas id="c" width="300" height="150"></canvas>
11Input Types & ValidationHTML5

email, number, date, range, color, search, url, tel with native validation.

javascript
<input type="email" required />
<input type="range" min="0" max="100" />
12Web Storage (localStorage / sessionStorage)HTML5

Client-side key-value storage as a replacement for cookies.

javascript
localStorage.setItem('theme', 'dark');
13WebWorkersHTML5

Run scripts on background threads to avoid blocking the main thread.

javascript
const worker = new Worker('worker.js');
14Custom Data AttributesHTML5

data-* attributes store extra information on elements without custom attributes.

javascript
<li data-id="42" data-category="fruit">Apple</li>
15details & summaryHTML5

Native disclosure widget without JavaScript.

javascript
<details><summary>More info</summary><p>...</p></details>
16picture ElementHTML 5.1

Art direction for responsive images — different source files per media condition.

javascript
<picture>
  <source media="(max-width: 600px)" srcset="sm.jpg" />
  <img src="lg.jpg" alt="..." />
</picture>
17Improved FormsHTML 5.1

Hidden attribute promotion, additional input attributes, fieldset improvements.

18menu & menuitemHTML 5.1

Context menu elements (later removed from spec).

19dialog ElementHTML 5.2

Native modal and non-modal dialog with built-in focus management and ::backdrop.

javascript
<dialog id="modal">
  <p>Content</p>
  <form method="dialog"><button>Close</button></form>
</dialog>
20Payment Request APIHTML 5.2

Browser-native checkout flow integrated with the HTML spec.

21Multiple main elementsHTML 5.2

Multiple <main> elements allowed if only one is visible at a time.

22Continuous updatesLiving Standard (WHATWG)

WHATWG publishes HTML as a living standard with no version numbers — changes ship continuously.

23loading="lazy"Living Standard (WHATWG)

Native lazy loading for images and iframes.

javascript
<img src="large.jpg" loading="lazy" alt="..." />
24decoding="async"Living Standard (WHATWG)

Hints the browser to decode images off the main thread.

javascript
<img src="photo.jpg" decoding="async" alt="..." />
25fetchpriority attributeLiving Standard (WHATWG)

Hint the browser about the relative priority of a resource (high, low, auto).

javascript
<img src="hero.jpg" fetchpriority="high" alt="Hero image" />
26Popover APILiving Standard (WHATWG)

Declarative popover behavior without JavaScript — toggle, show, hide via HTML attributes.

javascript
<button popovertarget="menu">Open</button>
<div id="menu" popover>Popover content</div>