Breaking News

Home / Frontend Development / HTML Course / HTML for Beginners / Learn HTML / WHAT IS WEB API | HTML WEB API

WHAT IS WEB API | HTML WEB API

July 08, 2026 , , ,

If you're asking about HTML Web APIs, these are browser-provided interfaces that let web pages interact with the browser, device, and web platform. HTML itself provides structure, while JavaScript uses Web APIs to add functionality.

Here are some of the most common Web APIs:

APIPurposeExample
DOM APIAccess and modify HTML elementsChange text, styles, attributes
Fetch APIRequest data from serversLoad JSON from an API
Geolocation APIGet user's locationGPS coordinates
Local Storage APIStore data in the browserSave user preferences
Session Storage APIStore temporary dataShopping cart during a session
Canvas APIDraw graphicsGames, charts, animations
Web Audio APIPlay and manipulate audioMusic players
WebRTC APIReal-time audio/video communicationVideo calls
WebSocket APITwo-way communicationLive chat
Notification APIShow desktop notificationsMessage alerts
Clipboard APIRead/write clipboardCopy and paste
Drag and Drop APIDrag elements on a pageFile uploads
History APIManipulate browser historySingle-page applications
Fullscreen APIEnter fullscreen modeVideo players
File APIRead local filesImage preview before upload

Example: Fetch API

<!DOCTYPE html>
<html>
<body>

<button onclick="loadData()">Load Data</button>
<p id="result"></p>

<script>
async function loadData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    document.getElementById("result").textContent = data.title;
}
</script>

</body>
</html>

Example: Local Storage API

<input type="text" id="name">
<button onclick="saveName()">Save</button>

<script>
function saveName() {
    const name = document.getElementById("name").value;
    localStorage.setItem("username", name);
    alert("Saved!");
}
</script>

Example: Geolocation API

<button onclick="getLocation()">Get Location</button>

<script>
function getLocation() {
    navigator.geolocation.getCurrentPosition(position => {
        alert(
            "Latitude: " + position.coords.latitude +
            "\nLongitude: " + position.coords.longitude
        );
    });
}
</script>

Categories of Web APIs

  • Browser APIs
    • DOM API
    • Fetch API
    • History API
    • Storage API
    • Clipboard API
    • Fullscreen API
  • Device APIs
    • Geolocation API
    • MediaDevices API (camera and microphone)
    • Battery API (limited support)
  • Graphics APIs
    • Canvas API
    • WebGL API
    • SVG API
  • Communication APIs
    • Fetch API
    • WebSocket API
    • WebRTC API

Web APIs are not part of HTML itself. They are provided by web browsers and are typically accessed using JavaScript to create interactive web applications.

No comments

Subscribe to: Post Comments ( Atom )