Sign in Get started

HTML Tutorial · HTML5 Features · Lesson 19 of 34

HTML5 Overview

What HTML5 added to the web: semantic elements, native media, graphics, richer forms, interactive elements and browser APIs.

What is HTML5?

HTML5 is the modern version of HTML. Since 2019 it has been maintained as the HTML Living Standard by the WHATWG, which means it keeps evolving instead of getting new version numbers. When people say "HTML5" today they usually mean modern HTML plus the browser APIs that came with it.

What it added

Area Examples Page
Simpler documents <!DOCTYPE html>, <meta charset="utf-8"> Document structure
Semantic elements header, nav, main, article, section, aside, footer Semantic elements
Native media video, audio, track captions Audio, video and iframes
Graphics canvas, inline svg Canvas, SVG
Responsive images picture, srcset, sizes, loading="lazy" Responsive images
Richer forms new input types, datalist, output, progress, meter, built-in validation Form elements, Validation
Interactive elements dialog, details/summary, popovers Dialog and popover, Details
Custom data and templates data-* attributes, template Templates and data attributes
Browser APIs Web Storage, drag and drop, History, Geolocation Web storage, Drag and drop

The example uses several HTML5 features at once. Press Run:

Several HTML5 features on one pageTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 at a glance</title>
</head>
<body>
  <header><h1>Trip planner</h1></header>
  <main>
    <details open>
      <summary>Packing list</summary>
      <label>Progress <progress value="3" max="5">3 of 5</progress></label>
    </details>
    <p>
      <label for="city">Destination</label>
      <input id="city" list="cities" placeholder="Start typing...">
      <datalist id="cities"><option value="Lisbon"><option value="London"><option value="Lyon"></datalist>
    </p>
    <svg width="120" height="40" role="img" aria-label="Sunny">
      <circle cx="20" cy="20" r="14" fill="gold"></circle>
      <text x="44" y="26">Sunny</text>
    </svg>
  </main>
</body>
</html>

Elements that are gone

HTML5 removed presentational elements such as <font>, <center> and <frameset>. Styling belongs in CSS, and layout uses semantic elements plus CSS.

Test yourself

Who maintains the HTML standard today?

  1. The W3C, as HTML 5.3
  2. The WHATWG, as the HTML Living Standard
  3. Each browser vendor separately
  4. ECMA International
Show answer

Answer: The WHATWG, as the HTML Living Standard

Since 2019 the WHATWG's HTML Living Standard is the single HTML specification.