HTML - What is a Web API?

🧩 A Simple Explanation for Beginners

Imagine you have a menu in a restaurant. The menu is a list of what you can order. You don’t go into the kitchen — you simply make a request to the waiter, and they bring you the result.

Web API works the same way:

• your application → sends a request (for example, “give me the weather in Tokyo”);
• the server → returns a response (for example, the temperature and forecast).

The API hides all the complexity of the “kitchen” — the internal logic of the server.

🔍 What Is Web API Used For?

Web API allows you to:

• exchange data between different services;
• use ready‑made functionality instead of building everything from scratch (for example, Google Maps, Stripe payments);
• build complex systems from separate components, like building blocks;
• scale products by processing large amounts of data.

🌐 Where Is Web API Used?

Almost everywhere in the modern web:

• mobile apps (weather, banking, social networks);
• websites (Google/Facebook login, map integration, payments);
• online stores (product catalogs, payments, deliveries);
• any services that exchange data between client and server.

What is Web API?

API stands for Application Programming Interface. An API is some kind of interface that includes a set of functions and subroutines that allow programmers to access specific features or data of an application, operating system or other services.

A Web API is an application programming interface for the Web.

HTML APIs

All browsers have a set of built-in Web APIs to support complex operations, and to help accessing data.

Here are some of the main HTML5 APIs:

1. Geolocation API - This API is used to access the current location of a user (with latitude and longitude).

2. Drag and Drop API - This API enables you to use drag-and-drop features in browsers.

3. Web Storage API - This API has mechanisms to let browsers store key/value pairs (in a more intuitive way than cookies).

4. Web Workers API - This API allows a JavaScript to run in the background, without affecting the performance of the page. Users can continue to do whatever they want: clicking, selecting things, etc., while the web worker runs in the background.

5. Server-Sent Events API - This API allows a web page to automatically get updates from a server.

6. Canvas API - This API lets you draw graphics, on the fly, via JavaScript.

Notes on Using HTML APIs

When implementing an HTML API, you should always:

Check Browser Capability - Always check that the target browsers support the API. Always add script or message to be run if a browser does not support it.

Add Robust Error Handling - Add robust error handling to take care of scenarios where an API may not function as expected, to ensure a seamless user experience.

Request User Permission - When using an API that accesses sensitive data, like the Geolocation API (which will access the user's geographical position), always prompt  the user for consent before proceeding.

Third Party APIs

Third party APIs are not built into your browser.

To use these APIs, you will have to download the code from the Web.

Examples:

• YouTube API - Allows you to display videos on a web site.
• Twitter API - Allows you to display Tweets on a web site.
• Facebook API - Allows you to display Facebook info on a web site.

📌 Summary

Web API is a bridge between applications.

It allows one service to receive data or functionality from another quickly, safely, and predictably.