How to Connect an API to an HTML Page (Beginner's Guide)

APIs are everywhere — they power the weather apps on our phones, real-time stock prices, and even your favorite chatbots. If you’re just learning web development, knowing how to connect an API to an HTML page is a powerful skill.

In this guide, you’ll learn how to connect an API to a simple HTML page using JavaScript. We’ll walk through a step-by-step example using a free public API.

What is an API?

API stands for Application Programming Interface. It's a way for two programs or services to talk to each other. In web development, APIs let your website pull in data from other platforms like weather reports, crypto prices, or news headlines — all in real-time!

Tools You’ll Need

A modern browser (Chrome, Firefox, etc.)
A text editor (like VS Code, Sublime, or Notepad++)
Basic knowledge of HTML and JavaScript

Example: Display Weather Data from OpenWeatherMap API

Let’s create a basic HTML page that fetches and displays current weather data using the Open-Meteo API (no API key needed).

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather API Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f7f7f7;
    }
    .weather {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      max-width: 400px;
    }
  </style>
</head>
<body>

  <h1>Current Weather</h1>
  <div class="weather" id="weather">Loading weather data...</div>

  <script>
    // Latitude and Longitude for Dhaka, Bangladesh
    const url = "https://api.open-meteo.com/v1/forecast?latitude=23.81&longitude=90.41¤t_weather=true";

    fetch(url)
      .then(response => response.json())
      .then(data => {
        const temp = data.current_weather.temperature;
        const wind = data.current_weather.windspeed;
        const html = `<p><strong>Temperature:</strong> ${temp}&deg;C</p>
                      <p><strong>Wind Speed:</strong> ${wind} km/h</p>`;
        document.getElementById("weather").innerHTML = html;
      })
      .catch(error => {
        document.getElementById("weather").innerHTML = "Error loading weather data.";
        console.error(error);
      });
  </script>

</body>
</html>

How It Works

fetch() sends a request to the Open-Meteo API
The API returns JSON data with the current temperature and wind speed
JavaScript grabs that data and displays it inside the #weather div

Try Other APIs

Once you understand the basics, you can try more advanced APIs:

Just update the fetch() URL and display new data!

Pro Tips

Always check the API’s documentation
Most real-world APIs need an API key — register for one
Use console.log(data) to debug your responses

Final Thoughts

Connecting an API to your HTML page unlocks a whole world of dynamic content. Whether you want to display live weather, stock prices, or social media posts, this is your first step into real-world JavaScript and data handling.

Keep experimenting, and don't forget to share your project with others!

Have questions or want more API examples? Let me know in the comments or contact me through the site!