# What is a Website URL? 🔗

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.beta.example.com:888/users/index.php?q=bob&role=2#info
```

This URL consist of the following components:

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


## Scheme component 
-----------
**Alternative naming:**  Protocol
<br>**Required:** Yes
<br>**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://`


## Authority component
-----------
** Alternative naming: ** HTTP authentication, credentials, authorization
<br>**Required:** No
<br>**Example:** `admin:pass@`

Basic authorization to a web/app resource indicated by  `@` (at) sign.
<br> Login `admin` is separated from password `pass` using `:` (colon) sign

In some cases password is optional (e.g. `https://admin@example.com`)


## Host component
-----------
** Alternative naming: ** Hostname
<br>**Required:** Yes
<br>**Example:** `a.beta.example.com`

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

1. `a` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     - fourth-level domain (sub-domain)
1. `beta` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;     - third-level domain (sub-domain) 
1. `example` &nbsp;&nbsp; - second-level domain (domain name)
1. `com` &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp; - top/first-level domain (TLD)

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


## Port component
-----------
**Required:** Yes
<br>**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


## Path component
-----------
**Required:** No
<br>**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.
<br>The path segments can be linked to a function/method in different files on a server:

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

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

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


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

The Query component always starts with a `?` (question) sign. 
<br> 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`*


## Hash component
-----------
** Alternative naming: ** Anchor
<br>**Required:** No
<br>**Example:** `#info`

Usually used by client-side scripting language named `Javascript`
<br> By default - the browser will make a focus on an element with `id` after `#` (hash) sign.
<br> In our case, the focus will be made on an element with ID `info`
- `#` &nbsp;&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 that contains basic info for found users*

-----------

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