Scribd
Upload
31 views2 pages

Absolute and Relative Links in HTML

The document explains the differences between absolute and relative links in HTML. Absolute links contain the full URL and are used for external resources, while relative links provide paths based on the current document's location and are ideal for internal navigation. Each type has its pros and cons regarding management, readability, and potential link breakage.

Uploaded by

muskankhan4723
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views2 pages

Absolute and Relative Links in HTML

The document explains the differences between absolute and relative links in HTML. Absolute links contain the full URL and are used for external resources, while relative links provide paths based on the current document's location and are ideal for internal navigation. Each type has its pros and cons regarding management, readability, and potential link breakage.

Uploaded by

muskankhan4723
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Links: Absolute and Relative

When creating links in HTML, you can use absolute or relative URLs in the href attribute.

1. Absolute Links

An absolute link contains the full URL to a resource, including the protocol (http:// or
https://), domain, and path. These links are used when pointing to external websites or
when specifying a complete URL.

Syntax:

<a href="https://www.example.com/page.html">Visit Example</a>

Example:

<a href="https://www.google.com">Go to Google</a>

Pros:

 Always points to the exact location, no matter where the current file is located.
 Useful for linking to external websites.

Cons:

 If the domain or path changes, the link breaks.


 Longer to write.

2. Relative Links

A relative link provides the path to a resource relative to the location of the current
document. These are often used for internal links within the same website or project.

Syntax:

<a href="page.html">Visit Page</a>

Example:

Assume the file structure:

/index.html
/about/page.html
/contact/form.html

 Same directory:
 <a href="page.html">Go to Page</a>
 Parent directory:
 <a href="../index.html">Go to Home</a>
 Child directory:
 <a href="about/page.html">Go to About</a>

Types of Relative Paths:

1. Same Folder:
2. <a href="file.html">Link to file in the same folder</a>
3. Parent Folder:
4. <a href="../file.html">Link to file in the parent folder</a>
5. Child Folder:
6. <a href="folder/file.html">Link to file in a subfolder</a>
7. Root Folder (starts from the root of the domain):
8. <a href="/images/photo.jpg">Link to image in root/images</a>

Pros:

 Easier to manage and update when working within the same website.
 Shorter and more readable.
 Works well when deploying the same structure across different domains (e.g., staging
and production).

Cons:

 Requires proper understanding of the file structure.


 Links may break if the file or folder is moved.

Comparison Table

Feature Absolute Link Relative Link


Contains Yes No (page.html or
domain? (https://example.com/page.html) ../page.html)
External websites or specific, fixed
Use case Internal website navigation
URLs
Length Longer Shorter
Portable if the file structure is
Portability Not portable across environments
intact

You might also like