HTML APIs and Integration

HTML doesn’t stop at structure. When paired with APIs and JavaScript, it becomes a gateway to interactive, intelligent, and immersive experiences. In this guide, you'll learn how HTML integrates with modern browser APIs like Canvas, Drag-and-Drop, Geolocation, and more — all with beginner-friendly examples.

The <canvas> element is used for drawing graphics via JavaScript — from shapes and images to charts and games.

Example: Drawing a Red Rectangle

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 75);
</script>

[ Red rectangle drawn on a 200x100 canvas ]

This API enables draggable content. You can create visual interfaces where users drag cherries, drop files, or rearrange items.

Example: Drag an Image of a Banana

<img src="banana.png" id="banana" width="100" draggable="true">
<div id="dropArea" style="width:200px;height:100px;border:2px dashed #888">Drop here</div>

<script>
  const banana = document.getElementById('banana');
  const dropArea = document.getElementById('dropArea');

  banana.addEventListener('dragstart', e => e.dataTransfer.setData('text', 'banana'));
  dropArea.addEventListener('dragover', e => e.preventDefault());
  dropArea.addEventListener('drop', e => {
    e.preventDefault();
    dropArea.innerText = 'Banana dropped!';
  });
</script>

Use this API to get the user's current location — with their permission. Great for weather apps, delivery tracking, and localized content.

Example: Show Latitude and Longitude

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

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(pos => {
        document.getElementById('geoOutput').innerText =
          'Latitude: ' + pos.coords.latitude + '\nLongitude: ' + pos.coords.longitude;
      });
    } else {
      document.getElementById('geoOutput').innerText = 'Geolocation not supported.';
    }
  }
</script>

Latitude: 17.385  
Longitude: 78.486

The <iframe> tag lets you embed external content — like maps, YouTube videos, or internal widgets — into your HTML document.

Example: Embed a YouTube Video

<iframe width="400" height="225"
  src="https://www.youtube.com/embed/banana123"
  title="Banana Smoothie Tutorial"
  allowfullscreen>
</iframe>

HTML provides the structure; JavaScript adds logic and interaction. You can access and modify HTML elements using JavaScript’s DOM API.

Example: Change Text on Button Click

<p id="fruit">I love apples.</p>
<button onclick="document.getElementById('fruit').innerText='I love cherries.'">Change Fruit</button>

[ Click button → "I love cherries." appears ]

HTML APIs are your window to richer, more meaningful user experiences. In this introduction, you learned how to:

• Draw and animate using the <canvas> API
• Enable visual interaction with the Drag-and-Drop API
• Use the Geolocation API for real-world location access
• Embed content with <iframe>
• Integrate JavaScript with HTML for dynamic content updates

Choose the option that lists all and only the correct statements.

1. You can set width and height attributes to control size
2. iframes can be used to embed videos like YouTube
3. iframes automatically adjust height based on content
4. Enabling fullscreen requires specific iframe attributes

Choose the option that lists all and only the correct statements.

1. Event listeners
2. DOM manipulation
3. CSS selectors
4. Fetch API

Coming up: Dive deeper into the Canvas API — learn how to draw shapes, work with images, and even create simple animations with JavaScript.