Projects Blog

Relative or absolute static paths: leading slashes in HTML URLs

There are differences in the use of the leading slash in HTML URLs. These paths point to the static resources of the website, and it’s important to distinguish between them to ensure proper usage.

Without leading slash:

<img src="assets/image" />

It will resolve to the relative URL:

https://website.com/directory/page/assets/image.png

With leading slash

This is the recommended way. Does not depend on web structure, it just points to the root path of the website.

<img src="/assets/image" />
https://website.com/assets/image.png

With points and slashes

It goes several folders back, and there’s the resource.

If we are located in the path https://website.com/directory/page

<img src="../assets/image" />

The path will resolve to:

https://website.com/directory/assets/image.png

I hope you found this article useful.

Happy coding! 🚀

Related posts