Building Dynamic Web Pages with HTML and the Fetch API

By Anastasia K.3 min readMarch 9, 2026

Understanding the Fetch API

The Fetch API is a JavaScript interface that allows you to make HTTP requests to servers. It replaces the older XMLHttpRequest method with a more powerful and flexible approach. The Fetch API returns a Promise that resolves to the Response object representing the response to the request.

Basic Syntax

The basic syntax for using the Fetch API is straightforward:

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Example: Fetching Data from an API

Let's create a simple HTML page that fetches and displays user data from a public API. We will use the JSONPlaceholder API, which provides fake data for testing and prototyping.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Example</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .user { margin: 10px 0; }
    </style>
</head>
<body>
    <h1>User List</h1>
    <button id="load-users">Load Users</button>
    <div id="user-container"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript to Fetch Data

Create a script.js file and add the following code to fetch user data when the button is clicked:

document.getElementById('load-users').addEventListener('click', () => {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(users => {
            const userContainer = document.getElementById('user-container');
            userContainer.innerHTML = ''; // Clear previous results
            users.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.classList.add('user');
                userDiv.innerHTML = `<strong>${user.name}</strong> - ${user.email}`;
                userContainer.appendChild(userDiv);
            });
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
});

Best Practices for Using the Fetch API

Error Handling: Always handle errors gracefully. Use .catch() to manage network errors and check the response status to ensure it's successful.

Use Async/Await: For cleaner code, consider using the async/await syntax. This approach makes your asynchronous code easier to read and maintain.

   async function loadUsers() {
       try {
           const response = await fetch('https://jsonplaceholder.typicode.com/users');
           if (!response.ok) {
               throw new Error('Network response was not ok');
           }
           const users = await response.json();
           displayUsers(users);
       } catch (error) {
           console.error('There has been a problem with your fetch operation:', error);
       }
   }

   function displayUsers(users) {
       const userContainer = document.getElementById('user-container');
       userContainer.innerHTML = ''; // Clear previous results
       users.forEach(user => {
           const userDiv = document.createElement('div');
           userDiv.classList.add('user');
           userDiv.innerHTML = `<strong>${user.name}</strong> - ${user.email}`;
           userContainer.appendChild(userDiv);
       });
   }

   document.getElementById('load-users').addEventListener('click', loadUsers);

Avoid CORS Issues: When fetching data from a different origin, ensure that the server supports Cross-Origin Resource Sharing (CORS). You may encounter CORS errors if the server does not allow requests from your domain.

Optimize Performance: Consider caching responses or using service workers for offline capabilities to enhance the performance of your web application.

Summary of Fetch API Features

Feature	Description
Promise-based	Uses Promises for asynchronous operations.
Response Handling	Provides methods like `.json()`, `.text()`, and `.blob()`.
Error Handling	Allows for easy error management with `.catch()`.
CORS Support	Can handle requests with Cross-Origin Resource Sharing.

Conclusion

The Fetch API is a powerful tool for building dynamic web applications with HTML. By following best practices and utilizing the provided examples, you can create responsive and user-friendly interfaces that effectively communicate with external data sources.