Open In App

Why API’s are consumed in HTML 5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

What is an API?
API stands for (Application Programming Interfaces) and is a way to build applications using off-the-shelf components, not just web development and scripting languages. 

Description of APIs
It is the building block exposed by a programming language to make it easier for developers to create complex functionality. It abstracts away more complex code and provides a simpler syntax instead. It is a set of programming codes that enables the transfer of data from one software application, or website to another software application. It is also used for exchanging data between the server and HTML.

What is the purpose of using APIs?
When building an application, an API simplifies programming by abstracting the underlying implementation and exposing only the objects or actions that developers need. While an email client’s graphical interface may provide the user with buttons that perform all the steps necessary to retrieve and highlight new emails, a file input/output API is a We may provide developers with functionality that requires copying files to a location.

HTML5 has a total of five APIs.

  1. HTML Geolocation – This API is used to determine the user’s geographic location. This can compromise your privacy, so the location cannot be used unless the user approves it.
  2. HTML Drag and Drop – Drag and drop is a very common feature. It’s to “grab” an object and drag it to another location on the web page.
  3. HTML Web Storage API – allows web applications to store data locally in the user’s browser, more secure than cookies.
  4. HTML Web Worker – JavaScript that runs in the background independently of other scripts without affecting web page performance.
  5. HTML SSE (Server sent event ) – A server-sent event is fired when a web page automatically receives an update from the server.

Why APIs are consumed in HTML 5?

HTML 5 APIs enable developers to create different types of galleries, web applications, games, animated graphics, and data visualization projects. Apart from that, these APIs also help in the following things:

  • Helps increase the flexibility of programs and features. 
  • It plays a key role in the collaboration between designers and developers. Increases design fidelity and facilitates mockup design.
  • helps you deliver better web solutions to the users.
  • helps you to use information quickly, effectively, and efficiently
  • Used in various multimedia areas such as video galleries, audio galleries, web applications, and data visualization.
  • Much advanced JavaScript might question the need for such an API. But these APIs not only help those with limited JavaScript skills. 
  • They also help save programmers time doing difficult tasks with simple APIs. Makes the programming process more flexible and easier.

These are some key insights that HTML programmers need to know about the APIs that exist in HTML5 and the benefits of using them in various areas.

Example: Like, if some website or application wants access to the location of the user then called Geolocation is available in HTML5.

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
  
    <p id="locate"></p>
    <script>
        var x = document.getElementById("locate");
        // Function for GEOLOCATION
        function getLocation() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
          } else { 
            x.innerHTML = "Geolocation is not supported by this browser.";
          }
        }
        function showPosition(position) {
          x.innerHTML = "Latitude: " + position.coords.latitude + 
          "<br>Longitude: " + position.coords.longitude;
        }
    </script>
  
</body>
</html>


Output:

Why API’s are consumed in HTML 5 ?

Why API’s are consumed in HTML 5 ?



Last Updated : 22 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads