How to Calculate the Relative Path


In URLs embedded in HTML documents, there are two ways of specifying the location of a directory or file. This is called the "path." An absolute path identifies the location of a file in relation to the entire file system. A relative path identifies its location in relation to a starting document, such as a web page.

  • Identify the absolute path of the resource you want to include in your document. For example, if you want to embed an image in your web page, its absolute path may be "/images/photo.jpg". The "/" at the beginning of the absolute path means "begin in the root folder used by the web server" when looking for the file.

  • Determine where you will store the HTML document you are writing. For example, if you are writing the home page for a website, it is normally stored in the root folder, so the absolute path for your page is "/index.html".

  • Locate the file you are linking to that is relative to the location of the document you are writing. For exmaple, "/index.html" is in the root folder, so the relative location of the graphic is "images/photo.jpg". Note the absence of the leading "/" character.

  • Use ".." notation to traverse directories. If you are writing a document stored in a subfolder, each ".." in a URL will move up one directory. For example: you are writing the file "/members_only/index.html" and need to reach the absolute path "/images/photo.jpg". Your URL must go up one directory to reach the images directory, relative to the location of your document. Therefore, the relative path would be "../images/photo.jpg". You can repeat ".." as often as needed for deeply nested subfolders: "../../../images/photo.jpg".

Tips & Warnings

  • Relative URLs are important for website reorganization. Relative paths help preserve links on pages when files and directories are moved to a new location. An absolute link to a file breaks when the file is moved.

Related Searches


Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!