HTML5 APIs Tutorial

HTML5 APIs Overview

Explore the powerful browser APIs that enable modern web applications with rich features and capabilities.

50+

APIs Available

95%

Browser Support

100%

Native Performance

Plugins Required

API Categories

Multimedia

Canvas API
WebRTC
Audio API
Video API

Storage

Web Storage
IndexedDB
Cache API
File API

Communication

WebSocket
Fetch API
Server-Sent Events
WebRTC

Device Access

Geolocation
Device Orientation
Battery Status
Vibration

📍 Geolocation API

Access the user's geographical location. Perfect for mapping services, location-based apps, and personalized content.

Code Example

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`Lat: ${latitude}, Lng: ${longitude}`);
    },
    (error) => {
      console.error('Error:', error.message);
    }
  );
}

🌍

Click the button to detect your location

Device API Status

🔋

Battery Status

Not Supported

🌐

Network Status

checking...

📱

User Agent

Node.js/22

Browser Support Overview

API	Chrome	Firefox	Safari	Edge
Geolocation API	✅	✅	✅	✅
Canvas API	✅	✅	✅	✅
Web Storage	✅	✅	✅	✅
Drag & Drop	✅	✅	✅	✅
History API	✅	✅	✅	✅
WebSocket API	✅	✅	✅	✅
WebRTC	✅	✅	✅	✅
Service Workers	✅	✅	✅	✅

Feature Detection

Modern Approach

// Check if API is supported
if ('geolocation' in navigator) {
  // Use the API
} else {
  // Provide fallback
}

Using Modernizr

if (Modernizr.geolocation) {
  // API is available
} else {
  // Load polyfill or show message
}