URL Structure & Paths (Absolute vs Relative)

What is a URL?

A URL (Uniform Resource Locator) is the address used to locate resources on the web. Understanding URL structure is essential for creating correct links.

Anatomy of a URL

Let's break down a complete URL into its components:

https://www.example.com:443/blog/article?id=123&sort=date#section-2
  ↓       ↓       ↓       ↓    ↓      ↓           ↓            ↓
Scheme  Subdomain Domain Port Path  File    Query String   Fragment

Full breakdown:
├─ Protocol/Scheme: https://
├─ Host/Domain: www.example.com
│  ├─ Subdomain: www
│  ├─ Domain: example
│  └─ TLD: .com
├─ Port: :443 (optional, default for https)
├─ Path: /blog/article
├─ Query String: ?id=123&sort=date
└─ Fragment: #section-2

www.example.com
├─ www (subdomain)
├─ example (domain name)
└─ .com (top-level domain)

/blog/articles/html-guide
├─ /blog (directory)
├─ /articles (subdirectory)
└─ /html-guide (file or route)

?id=123&category=html&sort=date
├─ ? (starts query string)
├─ id=123 (parameter 1)
├─ & (separator)
├─ category=html (parameter 2)
├─ & (separator)
└─ sort=date (parameter 3)

#section-2
└─ Jumps to element with id="section-2"

Absolute URLs

Absolute URLs contain the complete address, including protocol and domain.

<!-- Complete URL with all parts --&gt;
<a href="https://www.example.com/blog/article.html">Article</a>

<!-- External site link --&gt;
<a href="https://www.wikipedia.org">Wikipedia</a>

<!-- Secure vs non-secure --&gt;
<a href="https://secure-site.com">HTTPS Site</a>
<a href="http://old-site.com">HTTP Site</a>

<!-- With port number --&gt;
<a href="http://localhost:3000/app">Local Dev Server</a>

When to Use Absolute URLs:

Advantages:

• Work from anywhere (portable)
• Clear and unambiguous
• Required for external resources

Disadvantages:

• Longer and more verbose
• Harder to move site to new domain
• Can't easily test on different environments

Relative URLs

Relative URLs specify a path relative to the current page's location.

<!-- Relative to current directory --&gt;
<a href="about.html">About Page</a>

<!-- Subdirectory --&gt;
<a href="blog/article.html">Blog Article</a>

<!-- Parent directory --&gt;
<a href="../index.html">Parent Level</a>

<!-- Root-relative (starts with /) --&gt;
<a href="/contact">Contact Page</a>

<!-- Same page anchor --&gt;
<a href="#section-2">Jump to Section 2</a>

<!-- Query string only --&gt;
<a href="?page=2">Page 2</a>

Types of Relative URLs:

Current page: /blog/articles/post.html

<a href="other-post.html">
→ /blog/articles/other-post.html

<a href="images/photo.jpg">
→ /blog/articles/images/photo.jpg

Current page: /blog/articles/post.html

<a href="/about">
→ /about (from root)

<a href="/images/logo.png">
→ /images/logo.png (from root)

<!-- Inherits protocol from current page --&gt;
<a href="//example.com/page">Link</a>

If on https://mysite.com:
→ https://example.com/page

If on http://mysite.com:
→ http://example.com/page

When to Use Relative URLs:

• ✅ Internal site navigation
• ✅ Images, CSS, and JavaScript files on same domain
• ✅ Development (works on localhost and production)
• ✅ Easier site migration

Advantages:

• Shorter and cleaner
• Portable between environments (dev, staging, prod)
• Works with or without www prefix
• Automatically uses correct protocol

Disadvantages:

• Can be confusing with multiple directory levels
• Break if page moves to different location
• Don't work in emails or external contexts

Navigating Directory Structures

Understanding how to navigate directories with relative paths:

website-root/
├── index.html
├── about.html
├── blog/
│   ├── index.html
│   ├── post-1.html
│   └── post-2.html
├── images/
│   ├── logo.png
│   └── banner.jpg
└── assets/
    ├── css/
    │   └── style.css
    └── js/
        └── script.js

<!-- Same directory --&gt;
<a href="about.html">About</a>
→ /about.html

<!-- Subdirectory --&gt;
<a href="blog/index.html">Blog</a>
→ /blog/index.html

<!-- Image in subdirectory --&gt;
<img src="images/logo.png">
→ /images/logo.png

<!-- Root-relative --&gt;
<a href="/about.html">About</a>
→ /about.html

<!-- Same directory --&gt;
<a href="post-2.html">Post 2</a>
→ /blog/post-2.html

<!-- Parent directory --&gt;
<a href="../index.html">Home</a>
→ /index.html

<!-- Parent directory file --&gt;
<a href="../about.html">About</a>
→ /about.html

<!-- Different subdirectory (go up, then down) --&gt;
<img src="../images/logo.png">
→ /images/logo.png

<!-- Root-relative (easier!) --&gt;
<a href="/index.html">Home</a>
→ /index.html

<img src="/images/logo.png">
→ /images/logo.png

Query Strings & Parameters

Query strings pass data to pages through the URL:

<!-- Single parameter --&gt;
<a href="search.html?q=html">Search for HTML</a>
→ /search.html?q=html

<!-- Multiple parameters --&gt;
<a href="shop.html?category=books&sort=price&page=2">Books</a>
→ /shop.html?category=books&sort=price&page=2

<!-- With fragment --&gt;
<a href="article.html?id=123#section-2">Article Section</a>
→ /article.html?id=123#section-2

<!-- URL encoding special characters --&gt;
<a href="search.html?q=html%20%26%20css">Search "html & css"</a>
→ /search.html?q=html%20%26%20css

Common URL Encoding:

Common URL Mistakes

<a href="www.example.com">Link</a>
<!-- Treated as relative path: /www.example.com --&gt;

<!-- ✅ Correct --&gt;
<a href="https://www.example.com">Link</a>

<!-- From /blog/post.html, trying to link to /about.html --&gt;
<a href="about.html">About</a>
<!-- Goes to /blog/about.html (wrong!) --&gt;

<!-- ✅ Correct options --&gt;
<a href="../about.html">About</a>  <!-- Up one level --&gt;
<a href="/about.html">About</a>     <!-- Root-relative --&gt;

<a href="my page.html">Link</a>
<!-- Breaks! Spaces must be encoded --&gt;

<!-- ✅ Correct --&gt;
<a href="my-page.html">Link</a>        <!-- Use hyphens --&gt;
<a href="my%20page.html">Link</a>      <!-- Or encode --&gt;

<!-- On HTTPS site, linking to HTTP --&gt;
<img src="http://example.com/image.jpg">
<!-- Mixed content warning! --&gt;

<!-- ✅ Correct --&gt;
<img src="https://example.com/image.jpg">  <!-- HTTPS --&gt;
<img src="//example.com/image.jpg">        <!-- Protocol-relative --&gt;

Best Practices

Quick Reference