? File Paths in HTML

File paths tell the browser where to find files like images, CSS, or JavaScript when you include them in your HTML.

Types of File Paths

1. Absolute Path

• Full URL or full path from the root of your website or system

• Example (URL):

<img src="https://example.com/images/photo.jpg" alt="Photo">

• Example (root-based):

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

2. Relative Path

• Relative to the current HTML file location

• Moves up or down folders using ../ or folder names

Relative Path Examples

Assume your folder structure:

/project   /images      photo.jpg   /css      style.css   index.html

• From index.html to photo.jpg:

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

• From index.html to style.css:

<link rel="stylesheet" href="css/style.css">

• From a file inside a folder, e.g., /pages/about.html to photo.jpg:

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

(../ means “go up one folder”)

Summary Table

Why use Relative Paths?

• Easier to move your site folder around

• Keeps links working in local and deployed environments

Want me to help you fix broken paths or explain how to link scripts, stylesheets, or media files correctly?