WEBVTT

1
00:00:01.200 --> 00:00:03.439
A URL looks like one thing.

2
00:00:03.522 --> 00:00:09.952
It's really a set of instructions, and each part is written for a different reader.

3
00:00:10.152 --> 00:00:25.916
Take https://www.democompany.com/image.html?size=large#caption.

4
00:00:26.617 --> 00:00:28.509
The scheme is for the browser.

5
00:00:28.509 --> 00:00:34.475
https says: speak HTTP, and encrypt it.

6
00:00:34.779 --> 00:00:39.781
A mailto: scheme would hand the address to your mail program instead.

7
00:00:39.980 --> 00:00:41.963
The host is for DNS.

8
00:00:41.977 --> 00:00:48.314
www.democompany.com is looked up and becomes an IP address.

9
00:00:48.374 --> 00:00:50.439
The port is for the connection.

10
00:00:50.800 --> 00:00:58.299
Nobody wrote one here, so the browser fills in 443, the default for https.

11
00:00:58.499 --> 00:01:01.411
The path and the query are for the server.

12
00:01:01.552 --> 00:01:11.152
They travel inside the request, and the server decides what /image.html and size=large mean.

13
00:01:11.351 --> 00:01:14.542
To the browser they're just characters.

14
00:01:14.742 --> 00:01:24.098
Fun fact: the host also travels, in the Host header, so one server can answer for many sites at once.

15
00:01:24.298 --> 00:01:25.562
And the fragment?

16
00:01:25.703 --> 00:01:27.814
It never leaves your machine.

17
00:01:28.025 --> 00:01:36.417
The browser keeps #caption for itself, scrolls to the element with that id, and tells the page's scripts.

18
00:01:36.500 --> 00:01:39.459
The server never sees it.

19
00:01:40.159 --> 00:01:49.352
Most links in a page are relative, like the image page's ./assets/media/cat.webp.

20
00:01:49.540 --> 00:02:00.149
Before any reader sees one, the browser resolves it against the page's own address, borrowing the scheme, the host and part of the path.

21
00:02:00.849 --> 00:02:07.511
Each reader splits the URL at its own punctuation, so data must not look like punctuation.

22
00:02:07.687 --> 00:02:14.535
Percent-encoding writes a space as %20 and an ampersand as %26.

23
00:02:14.642 --> 00:02:20.189
In a form's query string, a plus sign means a space too.

24
00:02:20.890 --> 00:02:31.221
So when a link breaks, ask which reader it broke for: the browser, DNS, the connection, the server, or the page itself.

25
00:02:31.421 --> 00:02:38.269
Paste any URL into URL Explorer and see every part, and who reads it.