HTTP in 5 minutes

Why this matters

HTTP (HyperText Transfer Protocol) is the language browsers and servers speak. As a front-end developer you will read HTTP messages in the Network tab every week: to see why an image will not load, why a form submission failed, or why an old version of your stylesheet keeps showing up. The good news is that HTTP messages are plain text with a simple, fixed shape.

The shape of a request

Here is a request a browser might send:

GET /blog/post.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0) Firefox/131.0
Accept: text/html
Accept-Language: en-GB,en;q=0.8

1. Request line: the method (GET), the path (/blog/post.html) and the protocol version.
2. Headers: one Name: value pair per line, describing the request. Host says which site you want, because one server can host many sites. Accept says which formats the browser understands.
3. A blank line, then an optional body. A GET has no body; a form submission with POST carries the form data here.

The shape of a response

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1256
Cache-Control: max-age=600

<!DOCTYPE html>
<html lang="en">
  ...
</html>

1. Status line: the version, a status code (200) and a short reason (OK).
2. Headers: Content-Type tells the browser what the body is (HTML here, encoded as UTF-8). Cache-Control says the browser may reuse this copy for 600 seconds.
3. A blank line, then the body: the HTML document itself.

Newer versions of HTTP (HTTP/2 and HTTP/3) send the same information in a compact binary form, but developer tools show it to you in this readable shape, and the meaning is identical.

Methods: what you want to do

A plain link or typing a URL always sends GET. An HTML form sends GET by default, or POST when you write method="post". Rule of thumb: GET should never change anything on the server, which is why browsers happily repeat it, cache it and prefetch it.

Status codes: how it went

The first digit tells you the category:

The split between 4xx and 5xx is the most useful thing to remember. A 4xx says "change your request"; a 5xx says "the server has a problem, and retrying later may help".

A redirect response carries a Location header with the new URL, and the browser follows it automatically. That is how http:// addresses end up on https://.

Headers worth knowing

• Content-Type: what the body is (text/html, text/css, image/png, application/json). A stylesheet served as text/plain is ignored by the browser.
• Cache-Control: how long the browser may reuse a response. Long caching is why you sometimes need a hard reload (Ctrl+Shift+R or Cmd+Shift+R) to see your latest CSS.
• Set-Cookie (response) and Cookie (request): HTTP itself is stateless, meaning each request stands alone. Cookies let a site remember you between requests, for example to keep you logged in.
• Location: where a redirect points.

Worked example: reading the Network tab

Open developer tools, choose Network, and reload a page. Click the first row (the document) and look at Headers:

• General shows the request URL, the method (GET) and the status code (200).
• Response headers show content-type: text/html; charset=utf-8 and usually a cache-control value.
• Request headers show what your browser sent: accept, accept-language, user-agent.

Now find an image row. Its content-type is something like image/webp. If you ever see an image row in red with 404, the src path in your HTML is wrong: a very common beginner bug that the Network tab reveals in seconds.

Common mistakes

• Treating every error as "the server is broken". A 404 or 403 usually means the request (often your URL or path) needs fixing.
• Using GET to change data. Search engines and browsers may repeat GET requests; anything that deletes or buys should be POST (or another non-GET method).
• Ignoring the cache. If your change "did not work", check whether the browser is still using a cached copy.
• Assuming HTTP is private. Plain http:// traffic can be read in transit; use https://.

Quick recap

• A request is a method, a path, headers and an optional body. A response is a status code, headers and a body.
• 2xx success, 3xx redirect, 4xx your request is wrong, 5xx the server failed.
• Content-Type describes the body; Cache-Control explains stale files; cookies add memory to a stateless protocol.

Try it

Open the Do tab for a quiz where you read requests and responses and decide what happened.