HTML5 APIs Cheat Sheet

This lesson explains HTML5 APIs Cheat Sheet with clear examples, use cases, and best practices so you can use HTML5 APIs confidently in real web applications.

HTML5 Cheatsheet by Category

This HTML5 cheatsheet is a detailed quick reference for modern HTML5 elements, attributes, semantic tags, forms, media, graphics, browser APIs, accessibility, SEO, and performance. It is useful for beginners, frontend developers, full-stack developers, interview preparation, and real-world web development.

HTML5 is more than page markup. It provides semantic structure, native multimedia, advanced form validation, client-side storage, graphics, offline support, and powerful browser APIs for building modern web applications.

1. HTML5 Document Structure

Feature	Syntax	Purpose
Doctype	`<!DOCTYPE html>`	Enables standards mode in modern browsers.
HTML Root	`<html lang="en">`	Defines the document root and page language.
Head	`<head>...</head>`	Contains metadata, title, styles, and scripts.
Body	`<body>...</body>`	Contains visible page content.
Charset	`<meta charset="UTF-8">`	Defines character encoding.
Viewport	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	Enables responsive layouts on mobile devices.
Page Title	`<title>HTML5 Cheatsheet</title>`	Defines browser tab title and SEO page title.
Description	`<meta name="description" content="HTML5 guide">`	Provides SEO-friendly page summary.

2. Semantic HTML5 Elements

Element	Syntax	Use Case
Header	`<header></header>`	Introductory content for a page or section.
Navigation	`<nav></nav>`	Main navigation or important link groups.
Main	`<main></main>`	Main unique content of the page.
Section	`<section></section>`	Thematic group of related content.
Article	`<article></article>`	Independent reusable content such as a blog post.
Aside	`<aside></aside>`	Sidebar, note, ad, or related content.
Footer	`<footer></footer>`	Footer content for a page or section.
Figure	`<figure><figcaption>Caption</figcaption></figure>`	Media content with a caption.

3. Text & Content Elements

Element	Syntax	Purpose
Heading	`<h1>Title</h1>`	Creates page and section headings.
Paragraph	`<p>Text</p>`	Defines paragraph content.
Strong	`<strong>Important</strong>`	Marks important text semantically.
Emphasis	`<em>Emphasized</em>`	Marks emphasized text.
Code	`<code>const x = 1;</code>`	Displays inline code.
Preformatted	`<pre><code>...</code></pre>`	Displays code blocks with spacing preserved.
Blockquote	`<blockquote>Quote</blockquote>`	Represents quoted content.
Time	`<time datetime="2026-06-26">June 26, 2026</time>`	Represents machine-readable date and time.

4. Links & Lists

Element	Syntax	Best Use
Anchor Link	`<a href="/about">About</a>`	Navigate to pages, sections, files, or external sites.
External Link	`<a href="https://example.com" target="_blank" rel="noopener">Visit</a>`	Open external links safely in a new tab.
Unordered List	`<ul><li>Item</li></ul>`	Group related items without order.
Ordered List	`<ol><li>Step</li></ol>`	Display ordered steps or rankings.
Description List	`<dl><dt>HTML</dt><dd>Markup language</dd></dl>`	Display terms and definitions.

5. HTML5 Forms & Inputs

Feature	Syntax	Purpose
Form	`<form action="/submit" method="post"></form>`	Collects and submits user data.
Label	`<label for="email">Email</label>`	Associates visible text with an input.
Email Input	`<input type="email" id="email">`	Validates email format.
Date Input	`<input type="date">`	Provides native date picker.
Number Input	`<input type="number" min="1" max="10">`	Accepts numeric values.
Range Input	`<input type="range" min="0" max="100">`	Creates a slider control.
Required	`<input required>`	Enables native required validation.
Pattern	`<input pattern="[0-9]{5}">`	Validates input using a regular expression.
Fieldset	`<fieldset><legend>Contact</legend></fieldset>`	Groups related form controls accessibly.

6. Media Elements

Element	Syntax	Use Case
Image	`<img src="image.jpg" alt="Description">`	Displays accessible images.
Picture	`<picture><source srcset="image.webp"><img src="image.jpg" alt=""></picture>`	Serves responsive and modern image formats.
Audio	`<audio controls><source src="audio.mp3"></audio>`	Embeds native audio player.
Video	`<video controls><source src="video.mp4"></video>`	Embeds native video player.
Captions	`<track kind="captions" src="captions.vtt" srclang="en">`	Adds captions or subtitles to video.
Iframe	`<iframe src="page.html" title="Embedded content \| PHPKINGDOM"></iframe>`	Embeds external documents or applications.

7. Tables

Element	Syntax	Purpose
Table	`<table></table>`	Displays tabular data.
Caption	`<caption>Sales Report</caption>`	Provides an accessible table title.
Table Header	`<th scope="col">Name</th>`	Defines row or column headers.
Table Row	`<tr></tr>`	Defines a table row.
Table Cell	`<td>Data</td>`	Defines a data cell.
Table Sections	`<thead><tbody><tfoot>`	Organizes table content semantically.

8. Graphics & Drawing

Feature	Syntax	Use Case
Canvas	`<canvas id="canvas" width="500" height="300"></canvas>`	Pixel-based drawing, games, charts, animations.
2D Context	`canvas.getContext("2d")`	Draw shapes, text, images, and paths.
SVG	`<svg><circle cx="50" cy="50" r="40" /></svg>`	Scalable vector graphics, icons, diagrams.
WebGL	`canvas.getContext("webgl")`	GPU-powered 2D and 3D graphics.

9. Storage APIs

API	Syntax	Use Case
Local Storage	`localStorage.setItem("theme", "dark")`	Persistent small key-value storage.
Session Storage	`sessionStorage.setItem("step", "1")`	Temporary tab-based storage.
IndexedDB	`indexedDB.open("app-db")`	Large structured client-side database.
Cache API	`caches.open("v1")`	Stores requests and responses for offline support.

10. Popular Browser APIs

API	Syntax	Purpose
Fetch API	`fetch("/api/data")`	Make HTTP requests.
Geolocation API	`navigator.geolocation.getCurrentPosition()`	Access user location with permission.
Clipboard API	`navigator.clipboard.writeText("Copied")`	Read or write clipboard data.
Notification API	`Notification.requestPermission()`	Show system notifications.
History API	`history.pushState({}, "", "/page")`	Update URL without full page reload.
Fullscreen API	`element.requestFullscreen()`	Display content in fullscreen mode.
Broadcast Channel	`new BroadcastChannel("app")`	Communicate between same-origin tabs.
Web Workers	`new Worker("worker.js")`	Run JavaScript in background threads.
Service Workers	`navigator.serviceWorker.register("/sw.js")`	Enable caching, offline support, and PWA features.

11. File & Media APIs

API	Syntax	Use Case
File API	`input.files[0]`	Access user-selected files.
FileReader	`reader.readAsText(file)`	Read file contents in the browser.
Blob API	`new Blob(["Hello"], { type: "text/plain" })`	Create file-like data in memory.
Object URL	`URL.createObjectURL(blob)`	Preview or download Blob and File objects.
MediaDevices	`navigator.mediaDevices.getUserMedia()`	Access camera, microphone, or screen sharing.
MediaRecorder	`new MediaRecorder(stream)`	Record audio, video, or screen streams.

12. Performance & Observer APIs

API	Syntax	Purpose
Performance API	`performance.now()`	Measure runtime and page performance.
Intersection Observer	`new IntersectionObserver(callback)`	Detect when elements enter the viewport.
Resize Observer	`new ResizeObserver(callback)`	Detect element size changes.
Mutation Observer	`new MutationObserver(callback)`	Detect DOM changes.
requestAnimationFrame	`requestAnimationFrame(callback)`	Create smooth browser animations.

13. Accessibility & SEO Essentials

Practice	Syntax	Benefit
Page Language	`<html lang="en">`	Improves screen reader pronunciation and SEO.
Alt Text	`<img src="logo.png" alt="Company logo">`	Describes images for assistive technologies.
Form Label	`<label for="name">Name</label>`	Makes form controls accessible.
ARIA Label	`<button aria-label="Close menu">×</button>`	Provides accessible names when visible text is missing.
Meta Description	`<meta name="description" content="Learn HTML5">`	Provides search engine page summary.
Canonical URL	`<link rel="canonical" href="https://example.com/html5">`	Prevents duplicate SEO indexing issues.

HTML5 Cheatsheet Best Practices

Use semantic HTML before using generic div elements.
Include the HTML5 doctype, language attribute, charset, and viewport meta tag.
Use labels, alt text, headings, landmarks, and accessible media captions.
Choose native controls before building custom JavaScript widgets.
Validate HTML and test across modern desktop and mobile browsers.
Use feature detection before relying on advanced browser APIs.
Optimize images, scripts, styles, and media for performance.
Keep HTML clean, readable, SEO-friendly, and maintainable.

Pro Tip

Treat this cheatsheet as a coding checklist. Before publishing a page, verify semantic structure, accessibility, responsive metadata, SEO tags, optimized media, valid forms, and browser API fallbacks. Clean HTML5 improves SEO, accessibility, performance, and long-term maintainability.