Relative and Absolute Path

When specifying file locations (like images, CSS, or links) in HTML, you can use relative paths or absolute paths.

Absolute Path 

An absolute path is the full URL of a file or resource.

It includes the protocol (http/https), domain name, and file location.

<img src="https://example.com/images/photo.jpg" alt="Photo">
<a href="https://www.google.com">Visit Google</a>

Relative Path

A relative path refers to a file's location relative to the current file (HTML document).

This is useful for local projects where files are stored in folders.

If your website files are organized like this:

/project
    ├── index.html
    ├── images/
    │   ├── logo.png
    ├── styles/
    │   ├── style.css

A. Same Folder

If index.html and photo.jpg are in the same folder, use:

<img src="photo.jpg" alt="Photo">

B. Inside a Subfolder

If the image is inside an images/ folder:

<img src="images/logo.png" alt="Website Logo">

C. Go Back One Folder (../)

If index.html is inside /pages/ and the image is in /images/:

<img src="../images/logo.png" alt="Website Logo">