Chapter 3.1☕ 12 min read

HTML5 APIs

Biryani delivery track karo — API se real-time location.

01What are HTML5 APIs?

You open Swiggy to order biryani. The app shows your location, tracks the delivery in real-time, and shows the restaurant on a map. All of this is powered by HTML5 APIs.

HTML5 APIs are built-in tools that let your web pages do advanced things — get the user's location, draw graphics, drag elements, store data offline, and more. Best part? No external libraries needed. They're part of the browser.

🔌

API Analogy: An API is like ordering at Paradise — you tell them what you want (request), they bring it (response). You don't need to know how the kitchen works — just what you want.

02Key HTML5 APIs

The most important HTML5 APIs:

Geolocation API — Get user's location. "Show biryani shops near me."
Drag and Drop API — Drag elements. "Drag items to your cart."
Canvas API — Draw graphics with JavaScript. "Draw a biryani chart."
Web Storage API — Store data offline. "Save user preferences."
History API — Control browser history. "Single-page app navigation."
Geolocation: <button onclick="navigator.geolocation.getCurrentPosition(showPos)">Find My Location</button>
Drag & Drop: <div draggable="true">Drag this item</div>
Canvas: <canvas id="myCanvas" width="400" height="200"></canvas>

03How APIs Work — Flow

User triggers APIClicks button, drags element, visits page

→

Browser handles itUses native browser capability

→

Result to userLocation shown, item dragged, data saved

04Where to Use APIs

Use cases for HTML5 APIs:

Geolocation: Restaurant locator, delivery tracking, weather
Drag & Drop: File uploads, kanban boards, shopping carts
Canvas: Charts, games, image editing, animations
Web Storage: User preferences, cart data, offline content
History: Single-page apps, tab navigation, undo actions

05Exercise — Build an API Demo Page

Build a demo page showcasing 3 HTML5 APIs: Geolocation, Drag & Drop, and Canvas.

<!-- Geolocation: Find my location button -->
<!-- Drag & Drop: Drag items into a box -->
<!-- Canvas: Draw a shape with JS -->

Complete these:

Geolocation API button that shows coordinates Drag & Drop with draggable elements Canvas element with JavaScript drawing

Done — Key Points:

✅ HTML5 APIs are built into the browser — no libraries needed
✅ Geolocation gets user location (with permission)
✅ Drag & Drop lets users interact with elements
✅ Canvas draws graphics via JavaScript
✅ Web Storage saves data offline in the browser

Previous2.5 — Audio & Video 📋 All Chapters Next Chapter3.2 — Canvas →