HTML HTTP Status Code

Introduction

Every time your browser loads a page, downloads an image, or submits a form, the web server sends back an HTTP status code. That short number tells you whether the request worked, needs a redirect, or failed — and on whose side the problem lies (client or server).

This guide lists the main status codes grouped by class (1xx through 5xx), explains what each one means, and shows how to read codes with fetch() in plain JavaScript Try It demos.

What You’ll Learn

What is HTTP Status Code?

HTTP status codes are three-digit numeric codes that are returned by a web server in response to an HTTP request made by a client (such as a web browser).

These status codes provide information about the status of the request and the outcome of the server’s attempt to fulfill it.

The HTTP status codes are grouped into different classes, each indicating a specific category of response.

The classes are defined by the first digit of the status code:

1xx — Informational

The request has been received and the server is continuing the process.

2xx — Success

The request was successfully received, understood, and processed by the server.

3xx — Redirection

The client needs to take additional action to complete the request.

4xx — Client Error

The request contains incorrect syntax or cannot be fulfilled by the server due to client error.

5xx — Server Error

The server encountered an error while processing the request.

These status codes are an essential part of the HTTP protocol and are used to communicate the outcome of a request between the client and the server.

They provide valuable information for developers, allowing them to handle different scenarios and troubleshoot issues when interacting with web servers.

Examples Gallery

Three Try It demos show how to read real HTTP status codes with fetch() and look up common codes. Plain HTML, no CSS.

fetch('/html/status-code')
  .then(function (response) {
    console.log(response.status);      // 200
    console.log(response.statusText);  // OK
    console.log(response.ok);          // true
  });

200
OK
true

fetch('/html/this-page-does-not-exist')
  .then(function (response) {
    console.log(response.status);  // 404
    console.log(response.ok);      // false
  });

404
false

See Try It Yourself for a live preview.

🚀 Why Status Codes Matter

• Debugging — a 4xx points to the request or URL; a 5xx points to server code or infrastructure.
• SEO — search engines treat 301/308 differently from 302; soft 404s (200 with empty content) hurt rankings.
• APIs — REST APIs use 201 for create, 204 for delete-with-no-body, 409 for conflicts.
• Caching — 304 Not Modified saves bandwidth by reusing cached assets.
• User experience — custom 404 and 500 pages guide visitors when something goes wrong.
• Monitoring — uptime tools alert when your site starts returning 503 or 502.

Best Practices

• Return the right code — do not send 200 OK for a missing page; use 404 (or 410 if gone permanently).
• Use 301 for permanent moves — when renaming URLs, redirect old paths so bookmarks and SEO transfer.
• Custom error pages — friendly 404 and 500 HTML pages help users recover.
• Check APIs explicitly — always inspect response.status in fetch handlers.
• Log 5xx on the server — client-side code cannot fix internal server errors; server logs are essential.

Conclusion

HTTP status codes are the language servers use to report what happened to each request. Memorize the five classes first, then the handful you see daily: 200, 301, 302, 404, and 500. Use the full tables above as a reference when you encounter less common codes.

Practice reading live codes in the Try It editor, then continue with HTML drag and drop via the draggable attribute.