What is a URL?
A URL (Uniform Resource Locator) is the web address used to locate a resource (webpage or file) on the internet. Every link you click on the internet uses a URL to direct you to another page.
Here’s an example of a URL:
https://www.example.com/products.htmlA URL consists of different parts:
| Part | Example | Description |
|---|---|---|
| Protocol | http:// or https:// | Defines how the browser should communicate (HTTP or HTTPS). |
| Domain Name | www.example.com | The website’s address. |
| Path | /products.html | The specific page or file on the website. |
URLs are essential for linking between pages and including media like images, videos, and stylesheets.
Absolute vs. Relative URLs
In HTML, you use the <a> tag to create links. These links can use absolute URLs or relative URLs depending on how you want them to work.
What is an Absolute URL?
An absolute URL is the full web address of a page. It includes the protocol (http or https), the website name (domain), and the specific page path. If no page is mentioned, the homepage opens. Below is an example of an absolute URL:
<a href="https://www.example.com/about.html">Visit About Page</a>How it works:
- The link always points to
https://www.example.com/about.html, whether the user clicks it from the same website (www.example.com) or another website (www.google.com). - Absolute URLs are useful for linking to external websites or when linking from different domains.
What is a Relative URL?
A relative URL does not include the domain name; it only contains the path relative to the current page. Below is an example of a relative URL:
<a href="about.html">Visit About Page</a>How it works:
- If the current page is
https://www.example.com/index.html, this link will take the user tohttps://www.example.com/about.html. - Relative URLs are useful for linking pages within the same website.
Understanding Website Directory Structure and URL Paths
On large websites, keeping things organized is essential for easier navigation and maintenance. A great way to do this is by placing related pages into separate folders, also known as directories. This makes your website structured, scalable, and easy to manage.
How Directory Structure Works
Think of a website directory structure like a file system. The main folder of your website is called the root folder, and it contains all other files and folders.
For example, a fictional entertainment website called MovieStore might have the following structure:
Each section (2025, 2024, 2023) has its own folder. This structure makes it easy to find and update specific content.
Understanding File Relationships in a Website
The relationship between files and folders on a website is similar to a family tree:
- A parent folder contains child folders.
- A child folder belongs to a parent folder.
- A grandparent folder is two levels above a grandchild folder.
Example:
- The moviestore folder is a parent of the 2025 folder.
- The 2025 folder is a child of the moviestore folder.
- The moviestore folder is also a grandparent of the hindi folder inside 2023.
This logical structure helps developers and content managers navigate a website efficiently.
Homepages and Default Files
The main homepage of a website (and each section’s homepage) is usually named index.html. Web servers are configured to serve this file by default.
For example:
- Typing moviestore.com will open
moviestore.com/index.html. - Typing moviestore.com/2023 will open
moviestore.com/2023/index.html.
If you don’t specify a file, the server automatically looks for index.html inside the requested folder.
Types of Relative URLs and How to Use Them
| Relative Link Type | Example |
|---|---|
| Same Folder: To link to a file in the same folder, just use the filename. | To link to 2025 movie Chhaava from the 2025 homepage:<a href="chhaava.html">Chhaava Movie Reviews</a> |
| Child Folder: For a child folder, use its name followed by a forward slash, then the file name. | To link to 2025 movie Chhaava from the homepage:<a href="2025/chhaava.html">Chhaava Movie Reviews</a> |
| Grandchild Folder: For a grandchild folder, use the child folder’s name, followed by a forward slash, then the grandchild folder’s name, another forward slash, and finally the file name. | To link to 2023 hindi movie OMG 2 from the homepage:<a href="2023/hindi/omg-2.html">OMG 2</a> |
Parent Folder: Use ../ to move up one folder from the current one, then specify the file name. | To link to the homepage from the 2025 homepage:<a href="../index.html">Movie Store</a> |
Grandparent Folder: Use ../../ to move up two folders, then specify the file name. | To link to the homepage from the 2023 hindi movies homepage:<a href="../../index.html">Movie Store</a> |
Absolute vs. Relative URLs: Key Differences
| Feature | Absolute URL | Relative URL |
|---|---|---|
| Includes domain name? | ✅ Yes | ❌ No |
| Works across different domains? | ✅ Yes | ❌ No |
| Easier to update links when moving a website? | ❌ No | ✅ Yes |
| Best for internal links? | ❌ No | ✅ Yes |
| Best for external links? | ✅ Yes | ❌ No |