When creating links in HTML, you have two main ways to specify the destination: absolute URLs and relative URLs. Understanding the difference between them is crucial for building well-structured websites.
Absolute URLs
An absolute URL contains the complete web address, including the protocol (http:// or https://), domain name, and the full path to the resource. It specifies the exact location of a resource on the internet.
<a href="https://www.example.com">Example Website</a>
<a href="https://www.google.com/search">Google Search</a>
<a href="http://www.wikipedia.org/wiki/HTML">HTML on Wikipedia</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">Structure of an Absolute URL
https://www.example.com/blog/article.html
│ │ │ │ │
│ │ │ │ └─ File name
│ │ │ └─ Path
│ │ └─ Domain name
│ └─ Subdomain
└─ ProtocolWhen to Use Absolute URLs
- Linking to external websites: Always use absolute URLs for links to other domains
- Social media sharing: Absolute URLs ensure links work when shared outside your site
- Email content: Emails should use absolute URLs since they're viewed outside your website
- API endpoints: External resources need complete URLs
- Canonical URLs: For SEO purposes
Relative URLs
A relative URL specifies the path to a resource relative to the current page's location. It doesn't include the protocol or domain name—just the path from the current location to the destination.
<!-- Link to a page in the same directory -->
<a href="about.html">About Us</a>
<!-- Link to an image in the same directory -->
<img src="photo.jpg" alt="Photo">
<!-- Link to a page in a subdirectory -->
<a href="blog/article.html">Read Article</a>
<!-- Link to a stylesheet -->
<link rel="stylesheet" href="css/styles.css">When to Use Relative URLs
- Internal site navigation: Linking between pages on your own website
- Local resources: Images, CSS files, and JavaScript files on your server
- Development flexibility: Relative URLs work across different environments (local, staging, production)
- Easier maintenance: If you change your domain, you don't need to update all links
Types of Relative Paths
Same Directory
If the file is in the same directory as your current page, just use the filename:
<!-- Current page: /pages/index.html -->
<!-- Target: /pages/about.html -->
<a href="about.html">About</a>
<a href="contact.html">Contact</a>Subdirectory (Going Down)
To link to a file in a subdirectory, include the folder name:
<!-- Current page: /index.html -->
<!-- Target: /images/photo.jpg -->
<img src="images/photo.jpg" alt="Photo">
<!-- Target: /blog/posts/article.html -->
<a href="blog/posts/article.html">Article</a>Parent Directory (Going Up)
Use ../ to go up one directory level:
<!-- Current page: /blog/posts/article.html -->
<!-- Target: /blog/index.html -->
<a href="../index.html">Back to Blog</a>
<!-- Target: /index.html (go up two levels) -->
<a href="../../index.html">Home</a>
<!-- Target: /images/photo.jpg -->
<img src="../../images/photo.jpg" alt="Photo">Root-Relative URLs
Starting with a forward slash / makes the path relative to the site root:
<!-- These work from any page on your site -->
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
<img src="/images/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/styles.css">Root-relative URLs are very useful because they work from any page on your site, regardless of its directory structure.
Visual Example
Let's say you have this file structure:
website/
├── index.html
├── about.html
├── images/
│ ├── logo.png
│ └── banner.jpg
├── blog/
│ ├── index.html
│ └── posts/
│ ├── post1.html
│ └── post2.html
└── css/
└── styles.cssFrom blog/posts/post1.html, you could link to other files like this:
<!-- Link to another post in the same directory -->
<a href="post2.html">Next Post</a>
<!-- Link to blog index (one level up) -->
<a href="../index.html">Blog Home</a>
<!-- Link to site homepage (two levels up) -->
<a href="../../index.html">Site Home</a>
<!-- Link to about page (two levels up) -->
<a href="../../about.html">About Us</a>
<!-- Link to an image (two levels up, then into images) -->
<img src="../../images/logo.png" alt="Logo">
<!-- Root-relative (easier!) -->
<a href="/index.html">Home</a>
<img src="/images/logo.png" alt="Logo">Quick Comparison
| Feature | Absolute URL | Relative URL |
|---|---|---|
| Example | https://example.com/page.html | page.html or ../page.html |
| Portability | Less portable | More portable |
| Use for external sites | ✅ Yes | ❌ No |
| Use for internal links | ✅ Possible | ✅ Recommended |
| Domain change impact | Need to update all | No changes needed |
Best Practices
✅ Do:
- Use relative URLs for internal site links
- Use absolute URLs for external websites
- Use root-relative URLs for consistency across your site
- Keep your directory structure organized and logical
- Test all links thoroughly
❌ Don't:
- Use absolute URLs for internal links (hard to maintain)
- Use relative URLs for external websites (won't work!)
- Mix different URL styles inconsistently
- Create overly complex directory structures
- Forget to test links after moving files
Common Mistakes
Wrong Number of ../ Levels
<!-- Current page: /blog/posts/article.html -->
<!-- Target: /images/photo.jpg -->
<!-- ❌ Wrong - only goes up one level -->
<img src="../images/photo.jpg" alt="Photo">
<!-- ✅ Correct - goes up two levels -->
<img src="../../images/photo.jpg" alt="Photo">
<!-- ✅ Better - use root-relative -->
<img src="/images/photo.jpg" alt="Photo">Missing Protocol in Absolute URLs
<!-- ❌ Wrong - missing protocol -->
<a href="www.example.com">Example</a>
<!-- ✅ Correct - includes protocol -->
<a href="https://www.example.com">Example</a>Key Takeaways
- Absolute URLs include the full web address with protocol and domain
- Relative URLs are relative to the current page location
- Use absolute URLs for external websites
- Use relative URLs for internal site navigation
../moves up one directory level/at the start makes the path relative to the site root- Root-relative URLs work from any page on your site
What's Next?
Now that you understand absolute and relative URLs, you're ready to learn about link targets and attributes. In the next lesson, we'll explore how to control where links open and add additional functionality to your links.