HTTP basics: reading requests and responses in the browser · Lesson 3 of 6

Lesson 3: The response envelope: status code and what it means

Lesson objectives:

  • Read the status line of an HTTP response.
  • Place a status code into the correct class.
  • Explain whether a response body is present.

Previous << 2 | Next 4 >>

The server replies with a three-digit number

The server's answer is also an envelope. The first line of that envelope is the status line, and it always begins with a three-digit status code. That number is the server's way of saying, "I understood your request," or "I could not find that," or "I broke while trying." 12

Explanation

The status line

A typical response starts like this:

http
HTTP/1.1 200 OK
  • HTTP/1.1 is the protocol version.
  • 200 is the status code.
  • OK is the reason phrase, a short human-readable label. The reason phrase is informational; the number is what matters 12.

Status code classes

The first digit of the status code tells you the class:

  • 1xx — Informational (rare for beginners to see)
  • 2xx — Success, e.g. 200 OK 3
  • 3xx — Redirection, e.g. 301 Moved Permanently
  • 4xx — Client error, e.g. 404 Not Found 4
  • 5xx — Server error, e.g. 500 Internal Server Error 5

A status code is not a random error message. It is a standard category.

The response body

After the headers, the response may include a body: the actual HTML, image, JSON, or other data the browser asked for. Some responses, like 204 No Content, have no body because the answer is already complete in the status code and headers 1.

Worked example (follow along)

Here is a successful response to a GET request:

http
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 1276
<!doctype html><html>...</html>
  • Status code: 200 (success)
  • Content-Type: text/html tells the browser the body is HTML.
  • Content-Length: 1276 tells the browser how many bytes to expect.
  • The body is the HTML page.

Now here is a 404 response:

http
HTTP/1.1 404 Not FoundContent-Type: text/html

The server is working; it just does not have the page the browser asked for.

Your turn (faded example)

Match each status code to its class:

CodeClass
2002xx — Successful
4044xx — Client error
5005xx — Server error
3013xx — Redirection

Summary + what's next

The response starts with a status code. The first digit tells you the class: 2xx success, 3xx redirect, 4xx client error, 5xx server error. After the status line and headers, the response may carry a body. Next, you will learn where to read all of this inside your browser.

Footnotes

  1. MDN: HTTP messages — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Messages ↩ ↩2 ↩3

  2. MDN: HTTP response status codes — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status ↩ ↩2

  3. MDN: 200 OK — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/200 ↩

  4. MDN: 404 Not Found — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404 ↩

  5. MDN: 500 Internal Server Error — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/500 ↩

Exercises

01

Open the browser's Network panel, reload a page, and click one request. Look at the response headers. Can you find the status code and the Content-Type header?

Level 1 (warm-up)
Done criteria · checked locally
02

Common mistake breakdown: a learner sees 404 Not Found and says, "The website is down." Explain why that is usually the wrong conclusion and what the right conclusion is.

Level 2 (advanced)
Done criteria · checked locally