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