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.

What 2xx does and does not promise

A 2xx code is a statement about the HTTP transaction: the message arrived, was understood, and was answered. It is not a statement about whether what you wanted actually happened. A login form that rejects your password can answer 200 OK and put "wrong password" in the body; the request succeeded, the login did not 2. So when something looks broken but the status is green, read the body before concluding the request failed.

Response headers

The response carries headers too, and they describe the answer rather than the question 1:

  • Content-Type names the format of the body, so the browser knows whether to parse HTML, decode an image, or hand JSON to a script 1.
  • Content-Length says how many bytes the body has 1.
  • Location appears on redirect responses and holds the URL to go to next 6.
  • Set-Cookie asks the browser to store a value and send it back on later requests 7.
  • Cache-Control states whether and how long the response may be reused 8.

Caching: reuse versus revalidation

Cache-Control is where a lot of confusion lives. A private cache is tied to one client — typically the browser's own cache — while a shared cache sits between clients and the server and may serve many users from one stored copy 8. Two directives look alike and are not: no-store forbids keeping a copy at all, while no-cache allows storing and merely requires the browser to check with the server before reusing what it stored 8. That check is called revalidation, and its cheap answer is 304 Not Modified: no body, just "what you already have is still good" 86.

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 ↩4 ↩5 ↩6

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

  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 ↩

  6. MDN: Redirections in HTTP — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Redirections ↩ ↩2

  7. MDN: Using HTTP cookies — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies ↩

  8. MDN: HTTP caching — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Caching ↩ ↩2 ↩3 ↩4

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

My note

Jot down thoughts, sticking points, things you didn't get. Written to this course's appendix only — the lesson file is never touched.