HTML APIs

Learn about powerful HTML5 APIs that enable modern web application features

HTML5 introduced a rich set of JavaScript APIs that enable web applications to access device features, store data locally, perform background tasks, and create interactive experiences without plugins.

What are HTML APIs?

HTML APIs (Application Programming Interfaces) are JavaScript interfaces that allow web pages to interact with the browser and device features. These APIs enable modern web applications to work more like native apps.

Key Concepts

  • Browser Native: Built into modern browsers, no plugins required
  • JavaScript-Based: Accessed through JavaScript code
  • Standardized: Defined by W3C and WHATWG standards
  • Progressive: Can be used with feature detection for fallbacks

HTML5 API Topics

This section covers the most important HTML5 APIs that you'll use in modern web development:

HTML Geolocation API

The Geolocation API allows you to get the user's geographical location. Features include:

  • Get current position (latitude/longitude)
  • Watch position changes in real-time
  • Calculate distance and directions
  • Privacy-protected (requires user permission)
  • Integration with maps services
Learn HTML Geolocation →

HTML Drag and Drop API

The Drag and Drop API enables intuitive drag-and-drop interactions. Features include:

  • Make elements draggable
  • Define drop zones
  • Transfer data between elements
  • File upload via drag and drop
  • Custom drag images and effects
Learn HTML Drag and Drop →

HTML Web Storage API

The Web Storage API provides client-side data storage. Features include:

  • localStorage - persistent storage
  • sessionStorage - session-based storage
  • Store key-value pairs
  • 5-10 MB storage limit per origin
  • Synchronous API for easy use
Learn HTML Web Storage →

HTML Web Workers API

The Web Workers API enables background processing. Features include:

  • Run JavaScript in background threads
  • Prevent UI blocking
  • Heavy computation without freezing
  • Message passing between threads
  • Improved performance for complex tasks
Learn HTML Web Workers →

HTML5 APIs Overview

Here's a comparison of the main HTML5 APIs covered in this section:

API Purpose Common Use Cases Browser Support
Geolocation Get user location Maps, weather, location-based services Excellent
Drag and Drop Drag/drop interactions File upload, sortable lists, kanban boards Excellent
Web Storage Client-side storage User preferences, offline data, caching Excellent
Web Workers Background processing Heavy calculations, data processing, AI Excellent

Other Important HTML5 APIs

Besides the APIs covered in detail, HTML5 provides many other useful APIs:

Additional APIs

  • Fetch API: Modern way to make HTTP requests (replaces XMLHttpRequest)
  • History API: Manipulate browser history and URL without page reload
  • Notification API: Display system notifications to users
  • Fullscreen API: Request fullscreen mode for elements
  • Page Visibility API: Detect when page is visible or hidden
  • Vibration API: Trigger device vibration (mobile)
  • Battery Status API: Check device battery level
  • WebRTC API: Real-time communication (video/audio/data)
  • IndexedDB API: Low-level database for large amounts of structured data
  • Service Worker API: Background scripts for offline functionality

Feature Detection

Not all browsers support all APIs. Always use feature detection before using an API:

Feature Detection Example

// Check if Geolocation is supported
if ("geolocation" in navigator) {
  // Geolocation is available
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  });
} else {
  // Geolocation is not supported
  console.log("Geolocation is not supported by your browser");
}

// Check if Web Storage is supported
if (typeof(Storage) !== "undefined") {
  // localStorage is available
  localStorage.setItem("name", "John");
} else {
  // Web Storage is not supported
  console.log("Sorry, your browser does not support Web Storage");
}

// Check if Web Workers are supported
if (typeof(Worker) !== "undefined") {
  // Web Workers are available
  var worker = new Worker("worker.js");
} else {
  // Web Workers are not supported
  console.log("Sorry, your browser does not support Web Workers");
}

Best Practice

Always provide fallback functionality or clear error messages when an API is not supported. This ensures your website works for all users.

Browser Support Considerations

Support Tips

  1. Check Browser Compatibility: Use resources like Can I Use to check support
  2. Use Feature Detection: Always detect features before using them
  3. Provide Polyfills: Include polyfills for missing features when possible
  4. Graceful Degradation: Ensure core functionality works without APIs
  5. Progressive Enhancement: Add API features as enhancements
  6. Test Across Browsers: Test on different browsers and devices
  7. Mobile Considerations: Some APIs work differently on mobile
  8. Security & Privacy: Respect user privacy and handle permissions properly

Test Your Knowledge