HTML5
HTML5 Complete Reference
This complete reference summarizes the major feature areas that make up HTML5. Each area represents a group of related elements or APIs that together define what modern HTML5 can do. Use it as a map of the topics to explore in depth.
HTML5 Feature Areas at a Glance
| Feature | Description |
|---|---|
| Semantic Elements | Structural tags like <header>, <nav>, <section>, <article>, <aside>, <main>, and <footer> that describe meaning. |
| Media Elements | Native audio and video with <audio>, <video>, <source>, and <track> — no plugins required. |
| Graphics | <canvas> for scriptable 2D drawing and inline <svg> for scalable vector graphics. |
| Forms | New input types (email, url, date, number, range, color) plus <datalist>, <output>, <progress>, and <meter>. |
| Web Storage | Client-side key/value storage via localStorage and sessionStorage, plus IndexedDB for larger data. |
| Custom Data | data-* attributes for attaching custom data, read in JS via the dataset property. |
| JavaScript APIs | Geolocation, Drag and Drop, Web Workers, History API, and more. |
| Offline & PWA | Service Workers and the Cache API power offline apps (replacing the deprecated AppCache). |
The Foundation: Doctype and Structure
Every HTML5 document starts with the simple <!DOCTYPE html> declaration and a clear semantic structure. Mastering the feature areas above lets you build accessible, interactive, and offline-capable web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Reference</title>
</head>
<body>
<!-- Semantic structure, media, forms, and APIs go here -->
</body>
</html>💡
Explore each feature area as its own topic. Start with semantic elements and forms, then move on to media, storage, and the JavaScript APIs.