Absolute vs Relative URLs in HTML: Explained with Examples
When you create links (<a>) or insert images (<img>) in HTML, you need to specify the URL (Uniform Resource Locator) of the resource.
There are two main ways to write URLs:
Absolute URL
Relative URL
Understanding the difference is important for building websites that work correctly across different environments.
Absolute URLs
An absolute URL gives the full path to a resource, including protocol (http/https), domain name, and file path.
Example:
<a href="https://www.example.com/about.html">About Us</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">
Starts with
http://orhttps://.Always points to the same resource, no matter where the page is located.
Best for: External links, canonical references, and sharing links across websites.
Relative URLs
A relative URL specifies the location of a resource relative to the current page’s location.
Example:
<a href="about.html">About Us</a>
<img src="images/logo.png" alt="Logo">
Does not include domain name.
Changes meaning depending on where the HTML file is located.
Best for: Internal links within the same website.
Key Differences Between Absolute and Relative URLs
| Feature | Absolute URL | Relative URL |
|---|---|---|
| Format | Full path with protocol and domain | Partial path relative to current page |
| Example | https://www.example.com/about.html | about.html |
| Portability | Works anywhere | Depends on file location |
| Best Use Case | External links, SEO, sharing | Internal navigation within same site |
| Maintenance | Harder to maintain (full path each time) | Easier (shorter paths) |
Example: Absolute vs Relative in Practice
Suppose you have a website with the following structure:
/index.html
/about.html
/images/logo.png
Using Absolute URL:
Using Relative URL:
Both will display the same logo, but the absolute URL always points to the full website path, while the relative URL works only if the file structure remains the same.
Best Practices
- Use absolute URLs when linking to external websites.
- Use relative URLs for internal site navigation (easier to move your site).
- For SEO, prefer absolute URLs in canonical tags.
- Be consistent—mixing too many styles can cause confusion.
FAQs
Q1. Which is better for SEO: absolute or relative URLs?
Absolute URLs are generally preferred for SEO (especially in canonical tags), but relative URLs are fine for internal linking.
Q2. Do relative URLs break when moving files?
Yes, if you change file structure, relative links may break. Absolute URLs won’t.
Q3. Can I mix absolute and relative URLs in one page?
Yes, but it’s best to use a consistent strategy for easier maintenance.
Q4. Do browsers treat absolute and relative URLs differently?
No. The browser resolves both into a full path before loading the resource.
Q5. Should I always use HTTPS in absolute URLs?
Yes, HTTPS is secure and recommended by Google.