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
https://admin:pass@a.b.example.com:888/users/index.php?q=bob&role=2#info
This URL consist of the following components:
- Scheme
https://
- Authority
admin:pass@
- Host
a.b.example.com
- Port
888
- Path
users/index.php
- Query
q=bob&role=2
- Hash
#info
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://
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
)
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
-
a
- 4th level domain (sub-domain) -
b
- 3rd level domain (sub-domain). -
example
- 2nd level domain (domain name) -
com
- 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
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
- 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
Example: /users/index.php
Usually the Path component indicates a path to target file on a server
-
/
- the root path/folder. Let's imagine it is calledhtdocs
-
users
- folder namedusers
inside ofhtdocs
folder -
/index.php
- file namedindex.php
inside ofusers
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
- functionlist
inusers.php
file.
show list of all users/users/1/read
- functionread
with argumentID
inusers.php
file.
show info of user with ID = 1/users/images
- functionusers
inimage-collection.php
file.
show images of all users
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.
Key-value pairs are separated using &
(ampersand) sign.
-
?
- starting symbol that indicates presence of Query component -
q
- the first key -
=
- the sign, that assigns first value to a first key -
bob
- the first value -
&
- the key and value pair separator -
role
- the second key -
=
- the sign, that assigns second value to a second key -
2
- the second value
Example of logic behind this query: get all users named bob
with role ID 2
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
-
#
- 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
Top comments (0)