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

Lesson 2: The request envelope: method, address, and headers

Lesson objectives:

  • Identify the HTTP method in a request.
  • Identify the path or URL in a request.
  • Name at least one common request header and explain what it does.

Previous << 1 | Next 3 >>

A letter needs an action, an address, and a note on the envelope

When the browser sends a request, it is not just yelling "give me the page!" It writes a formal envelope. That envelope has three parts: what it wants to do, where it wants to do it, and a few extra notes for the server.

In HTTP, those three parts are called the method, the path, and the headers 1.

Explanation

Method: the action

The HTTP method is a single word that says what the browser wants. The most common ones are:

  • GET — "Please send me this resource." 2
  • POST — "Here is some data; please accept it." 3

Most page loads use GET.

Path: the address

The path is the part of the URL that comes after the domain. For https://example.com/about, the path is /about. In the request itself, the browser writes only the path, because the domain is already sent in a header 14.

Headers: the extra notes

Headers are metadata lines that come after the request line. Each header has a name and a value, separated by a colon. For example:

http
Host: example.comUser-Agent: Mozilla/5.0Accept: text/html

The Host header tells the server which domain the request is for. The User-Agent header tells the server which browser is asking. The Accept header tells the server what kind of content the browser can handle 1.

Worked example (follow along)

Here is a complete GET request for https://example.com/about:

http
GET /about HTTP/1.1Host: example.comUser-Agent: LearnBrowser/1.0Accept: text/html
  • GET is the method.
  • /about is the path.
  • Host: example.com, User-Agent: LearnBrowser/1.0, and Accept: text/html are headers.

Your turn (faded example)

Underline or label each part of this request:

http
POST /contact HTTP/1.1Host: example.comContent-Type: application/x-www-form-urlencoded
  • Method: POST
  • Path: /contact
  • Headers: Host: example.com and Content-Type: application/x-www-form-urlencoded

Summary + what's next

A request is an envelope with three parts: the method (what to do), the path (which resource), and the headers (extra notes). In the next lesson, you will look at the server's reply.

Footnotes

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

  2. MDN: GET request method — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET ↩

  3. MDN: POST request method — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/POST ↩

  4. MDN: Overview of HTTP — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview ↩

Exercises

01

Open your browser's developer tools to the Network panel (you will learn more about this in the next lesson, but the tab is usually called Network or Inspect). Reload any page. Click one request and look for its Headers section. Can you find the method and the path?

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

A request has the method GET and the path /search?q=cats. Which part of the request is asking for the search results, and which part is just carrying the keyword?

Level 2 (advanced)
Done criteria · checked locally