HTML File Path:

What is an HTML File Path?

✔ In HTML, a file path specifies the location of a file (such as an image, stylesheet, script, or webpage) that you want to link to or display.
✔ File paths are used in attributes like src (for images, scripts) and href (for links, stylesheets).

1️⃣ Types of File Paths

1️⃣ Absolute File Path → Specifies the full URL of a file.
2️⃣ Relative File Path → Specifies the file’s location relative to the current document.

2️⃣ Absolute File Path

✔ An absolute path includes the full URL or complete directory location of the file.
✔ It is useful when linking to external websites or resources stored at a fixed location.

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

✔ The image is loaded from https://www.example.com/images/photo.jpg.

<a href="https://www.google.com">Visit Google</a>

✔ Clicking this link takes the user to Google's website.

3️⃣ Relative File Path

✔ A relative path specifies the file based on the current document’s location.
✔ It is useful when linking files within the same website.

Example: Linking an Image

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

✔ The browser looks for photo.jpg inside the images folder.

Example: Linking a CSS File

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

✔ The browser looks for style.css inside the styles folder.

4️⃣ Types of Relative Paths

Type	Example	Description
Same Folder	`src="file.jpg"`	The file is in the same directory as the HTML file.
Subfolder	`src="images/file.jpg"`	The file is inside a subfolder of the current directory.
Parent Folder	`src="../file.jpg"`	The file is in the parent directory (one level up).
Root Directory	`src="/images/file.jpg"`	The file is in the website’s root folder.

5️⃣ Example: Folder Structure and File Paths

Website Folder Structure

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

File Path Usage

File	File Path
`logo.png` inside `/images`	`<img src="images/logo.png">`
`style.css` inside `/css`	`<link rel="stylesheet" href="css/style.css">`
`index.html` inside `/project`	`<a href="index.html">Home</a>`

Best Practices for File Paths

✅ Use relative paths for linking files within a website.
✅ Use absolute paths for external links and resources.
✅ Follow proper folder organization for easy file management.
✅ Avoid spaces in filenames (use - or _ instead).