DEV Community

Cover image for What is a Website URL? 🔗
Anton
Anton

Posted on • Edited on

What is a Website URL? 🔗

#webdev #programming #beginners #codenewbie

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
Enter fullscreen mode Exit fullscreen mode

This URL consist of the following components:

  1. Scheme      https://
  2. Authority    admin:pass@
  3. Host           a.b.example.com
  4. Port            888
  5. Path           users/index.php
  6. Query        q=bob&role=2
  7. 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

  1. a              - 4th level domain (sub-domain)
  2. b              - 3rd level domain (sub-domain).
  3. example    - 2nd level domain (domain name)
  4. 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 called htdocs
  • users          - 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     - 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

 

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.

  1. ?       - starting symbol that indicates presence of Query component
  2. q       - the first key
  3. =       - the sign, that assigns first value to a first key
  4. bob   - the first value
  5. &       - the key and value pair separator
  6. role  - the second key
  7. =       - the sign, that assigns second value to a second key
  8. 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)