Know and understand relative file path and absolute file path including the reason absolute file paths must not be used for hyperlinks to locally saved web pages/objects

Published by Patrick Mutisya · 8 days ago

Website Authoring – Relative and Absolute File Paths

21. Website Authoring

Objective

Know and understand relative file path and absolute file path including the reason absolute file paths must not be used for hyperlinks to locally saved web pages/objects.

Key Definitions

  • File path – the address that tells a computer where a file is stored.

  • Absolute file path – a complete address that starts from the root of the file system or from a protocol (e.g., file:///C:/Users/John/Documents/site/index.html or https://www.example.com/images/logo.png).

  • Relative file path – an address that is given in relation to the location of the current document (e.g., images/logo.png, ../styles/main.css).

Absolute File Paths

Characteristics:

  1. Start from the root of the drive or from the protocol.

  2. Include the full directory hierarchy.

  3. Remain the same regardless of the location of the referencing document.

Example of an absolute path on a Windows system:

file:///C:/Users/John/Documents/website/index.html

Example of an absolute URL on the web:

https://www.example.com/assets/css/style.css

Relative File Paths

Characteristics:

  1. Are written from the perspective of the current document’s folder.

  2. Use . to refer to the current folder and .. to move up one level.

  3. Make the site portable – the same set of files can be moved to a different folder or computer without breaking links.

Common forms:

  • images/photo.jpg – same folder → sub‑folder.

  • ../scripts/app.js – one level up, then into scripts folder.

  • ../../styles/main.css – two levels up, then into styles.

Why Absolute Paths Should Not Be Used for Local Hyperlinks

ReasonExplanation
PortabilityAn absolute path ties the link to a specific drive letter or server address. If the folder is copied to another computer, the link will break.
Security & PrivacyAbsolute paths can expose the full directory structure of a user’s computer, which is undesirable when sharing files.
CollaborationWhen multiple users work on the same project, each may have different folder structures. Relative paths ensure everyone can open the pages correctly.
Web PublishingWhen the site is uploaded to a web server, the root changes. Relative paths automatically adjust, while absolute paths would still point to the original local location.

Practical Example

Folder structure:

website/
│
├─ index.html
├─ about.html
├─ images/
│   └─ logo.png
└─ css/
└─ style.css

Linking from about.html to the logo image:

  • Absolute path (bad for local use): file:///C:/Users/John/website/images/logo.png

  • Relative path (recommended): images/logo.png

Checklist for Using Paths Correctly

  1. Identify the location of the current document.

  2. Determine the target file’s location relative to the current document.

  3. Use ../ to move up directories as needed.

  4. Write the path using forward slashes (/) – even on Windows.

  5. Test the link after moving the whole folder to a new location.

Suggested diagram: Folder hierarchy with arrows showing relative path navigation from about.html to images/logo.png and css/style.css.

Summary

  • Absolute paths give a complete address but are inflexible for local projects.

  • Relative paths are concise, portable, and the preferred method for linking pages, images, stylesheets, and scripts within a locally saved website.

  • Always use relative paths when creating hyperlinks between pages or objects that will be moved, shared, or uploaded to a web server.