What is a Website URL? 🔗
Tags: webdev, programming, codenewbie, beginners
Published: 2021-08-16 21:21:47

URL (Uniform Resource Locator) is the so-called address of the desired resource on the internet that consists of multiple components/parts. 

Let's take a look at the following URL

```text
https://admin:pass@a.b.example.com:888/users/index.php?q=bob&role=2#info
```

This URL consist of the following components:

1. Scheme &nbsp;&nbsp;&nbsp;&nbsp;   `https://`
1. Authority &nbsp;&nbsp; `admin:pass@`
1. Host &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;   `a.b.example.com`
1. Port &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;`888`
1. Path &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; `users/index.php`
1. Query  &nbsp; &nbsp; &nbsp;&nbsp;  `q=bob&role=2`
1. Hash  &nbsp;&nbsp; &nbsp; &nbsp;  &nbsp;  `#info`

&nbsp;
## Scheme component 
-----------
**Alternative naming:**  Protocol
**Required:** Yes
**Example:** `https://`

The scheme specifies which application will be used by a web server (app on Windows/i0S/Android) to open a URL. 

For example, opening a URL with the scheme `mailto://` will open your webmail application.

- Common examples: `https://`, `http://` , `ftp://`, `mailto://`, `file://`
- Custom app examples: `facetime://`, `slack://`, `steam://`
- Browser specific examples: `about://`, `chrome://`
- Additional browser examples: `data://`, `javascript://`

&nbsp;
## Authority component
-----------
**Alternative naming:** HTTP authentication, credentials, authorization
**Required:** No
**Example:** `admin:pass@`

Basic authorization to a web/app resource indicated by  `@` (at) sign.
Login `admin` is separated from password `pass` using `:` (colon) sign
In some cases password is optional (e.g. `https://admin@example.com`)

&nbsp;
## Host component
-----------
**Alternative naming:** Hostname
**Required:** Yes
**Example:** `a.b.example.com`

The Host consists of multiple domain names separated by `.` (dot) sign.
Domain name with level > 2 is called sub-domain

1. `a` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     - 4th level domain (sub-domain)
1. `b` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     - 3rd level domain (sub-domain). 
1. `example` &nbsp;&nbsp; - 2nd level domain (domain name)
1. `com` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp; - top/1st level domain (TLD)

The host can be an IP address in IPv4 (e.g. `193.184.216.34`)
or IPv6 (e.g. `[2a00:1450:400e:80a::200e]`) format

&nbsp;
## Port component
-----------
**Required:** Yes
**Example:** `888`

The port component indicates which server we are referring to on the target host

The `:` (colon) sign indicates port component usage. `888` is the port number

The server can accept connections on multiple ports. E.g. port numbers `80` and `443` can be used by a single server:
- `80`&nbsp; &nbsp;- port number is used for basic web connection
- `443` - port number is used for secure (TLS/SSL) web connection

The port `:443` or `:80` is omitted when a web page has `https://` or `http://` scheme

&nbsp;
## Path component
-----------
**Required:** No
**Example:** `/users/index.php`

Usually the Path component indicates a path to target file on a server
- `/`&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;-  the root path/folder. Let's imagine it is called `htdocs`
- `users`    &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;  -  folder named `users` inside of `htdocs` folder
- `/index.php` - file named `index.php` inside of `users` folder


In some cases, the Path component can use custom mapping/scheme/rewrite rule. The path segments can be linked to a function/method in different files on a server:

- `/users/list`     &nbsp;&nbsp;&nbsp;&nbsp;- function `list` in `users.php` file.
*show list of all users*

- `/users/1/read` - function `read` with argument `ID` in `users.php` file. 
*show info of user with ID = 1*

- `/users/images` - function `users` in `image-collection.php` file. 
*show images of all users*

&nbsp;
## Query component
-----------
**Alternative naming:** Query string, Search string
**Required:** No
**Example:** `?q=bob&role=2`

The Query component always starts with a `?` (question) sign. 
It consists of key-value pairs. The value is assigned to a key using the `=` (equals) sign. 
<br> Key-value pairs are separated using `&` (ampersand) sign.
1. `?`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - starting symbol that indicates presence of Query component 
1. `q`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - the first key
1. `=`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - the sign, that assigns first value to a first key
1. `bob`&nbsp;&nbsp; -  the first value
1. `&`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-  the key and value pair separator
1. `role`&nbsp;&nbsp;- the second key
1. `=`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- the sign, that assigns second value to a second key
1. `2`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- the second value


Example of logic behind this query: *get all users named `bob` with role ID `2`*

&nbsp;
## Hash component
-----------
**Alternative naming:** Anchor
**Required:** No
**Example:** `#info`

Usually used by client-side scripting language named `Javascript`
By default - the browser will make a focus on an element with `id` after `#` (hash) sign. In our case, the focus will be made on an element with ID `info`
- `#` &nbsp;&nbsp; &nbsp; - starting symbol that indicates the presence of Hash component
- `info` - the value of a Hash component

Example of logic behind this hash: *show tab with basic info for found users*

-----------

> 
Thanks for reading 👍
>
Follow me on Twitter - https://twitter.com/therceman