HTML File Paths

HTML File Paths: Relative and Absolute

1. Relative File Path

A relative path points to a file relative to the location of the current HTML file.

<img src="images/photo.jpg">
<a href="about.html">About Page</a>
<link rel="stylesheet" href="css/style.css">

Key Points:

• Shorter and more flexible paths
• Paths change if folder structure changes
• Common for linking internal files within the same website/project
• Makes projects more portable when moving between servers

2. Absolute File Path

An absolute path provides the full URL or location of a file.

<img src="https://example.com/images/photo.jpg">
<a href="https://example.com/about.html">About Page</a>
<link rel="stylesheet" href="https://cdn.example.com/style.css">

Key Points:

• Includes complete domain or full directory path
• Works globally (used for CDN links or external files)
• Doesn't break when files are moved within your site
• Essential for cross-domain resource linking

Relative Path Variants

<!-- Current folder -->
<img src="./photo.jpg">

<!-- One folder up -->
<link href="../styles/main.css">

<!-- Subfolder -->
<script src="js/app.js"></script>

Best Practices

• Use relative paths for files within your website/project
• Use absolute paths for external resources (CDNs, other domains)
• Keep file and folder names lowercase with hyphens (no spaces)
• Be consistent with path styles throughout your project
• Use root-relative paths (starting with /) for larger sites
• Test paths after moving files or changing directory structures