What Are HTML5 APIs?

HTML5 introduced a bunch of built-in browser features you can use without installing anything. These APIs give web apps more power: storage, location, drawing, files, audio, video, and more.

1. Geolocation API

Gets the user's location (with permission).

navigator.geolocation.getCurrentPosition(position => {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
});
      

2. Local Storage API

Stores data in the browser permanently.

localStorage.setItem("username", "Kaloyan");
console.log(localStorage.getItem("username"));
      

3. Session Storage API

Same as LocalStorage, but deletes on tab close.

sessionStorage.setItem("score", 120);
      

4. Canvas API

Draw graphics and animations directly in the browser.

<canvas id="myCanvas" width="200" height="200"></canvas>



      

5. Drag and Drop API

<div draggable="true">Drag me</div>
      

6. File Reader API

const reader = new FileReader();
reader.onload = e => console.log(e.target.result);
reader.readAsText(file);
      

7. Web Storage vs Cookies

• ✔ Up to 5–10MB storage
• ✔ Fast
• ✔ Doesn’t get sent to server
• ✖ Not for authentication tokens

8. Web Workers

Run JavaScript in background threads.

// worker.js
onmessage = function(e) {
  postMessage(e.data * 2);
};
      

What's Next?

HTML5 APIs open doors to powerful web apps — next you’ll explore JavaScript ES6 Features and learn how to combine APIs with modern JS.