What is a relative path?

It is a path relative to the current file location.

What is an absolute path?

It is a full URL pointing to a resource.

HTML File Paths: Absolute and Relative Paths - Learn HTML | Revochamp

Name: HTML File Paths: Absolute and Relative Paths
Availability: InStock
Author: Revochamp

What are File Paths?

File paths specify the location of files such as images, CSS, JavaScript, or other pages in HTML.

Types of File Paths

Type	Description	Example
Absolute Path	Full URL to a file	https://example.com/image.jpg
Relative Path	Path relative to current file	images/photo.jpg
Root Relative	Path from root directory	/images/photo.jpg

Absolute Path Example

HTMLRead-only

<img src="https://example.com/image.jpg" alt="Image">

<img src="https://example.com/image.jpg" alt="Image">

Relative Path Example

HTMLRead-only

<img src="images/photo.jpg" alt="Image">

<img src="images/photo.jpg" alt="Image">

Going Up a Folder

HTMLRead-only

<img src="../images/photo.jpg" alt="Image">

<img src="../images/photo.jpg" alt="Image">

Root Relative Path

HTMLRead-only

<img src="/assets/images/photo.jpg" alt="Image">

<img src="/assets/images/photo.jpg" alt="Image">

Using Paths in Links

HTMLRead-only

<a href="pages/about.html">About Us</a>

<a href="pages/about.html">About Us</a>

Using Paths in CSS and JS

HTMLRead-only

<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>

<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>

Best Practices

Use relative paths for local projects
Use absolute paths for external resources
Keep folder structure organized
Avoid deep nested paths when possible
Use consistent naming conventions

Common Mistakes

Incorrect folder structure
Wrong use of ../
Broken links due to incorrect paths
Mixing absolute and relative paths improperly

Conclusion

Understanding file paths is essential for linking resources correctly in HTML. Proper usage ensures your website works smoothly across environments.

Type

Description

Example

Absolute Path

Full URL to a file

https://example.com/image.jpg

Relative Path

Path relative to current file

images/photo.jpg

Root Relative

Path from root directory

/images/photo.jpg

HTML File Paths: Absolute and Relative Paths

HTML File Paths: Absolute and Relative Paths

What are File Paths?

Types of File Paths

Absolute Path Example

Relative Path Example

Going Up a Folder

Root Relative Path

Using Paths in Links

Using Paths in CSS and JS

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

HTML File Paths: Absolute and Relative Paths

HTML File Paths: Absolute and Relative Paths

What are File Paths?

Types of File Paths

Absolute Path Example

Relative Path Example

Going Up a Folder

Root Relative Path

Using Paths in Links

Using Paths in CSS and JS

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?