HTML Course 6.2 Absolute and relative paths and asset organization

6.2 Absolute and Relative Paths and Asset Organization

In HTML projects, linking to assets (stylesheets, scripts, images, fonts) requires specifying paths. Paths can be absolute or relative. Choosing the right form and organizing your folders makes development and maintenance much easier.

1. Absolute Paths

An absolute path points to the exact location of a resource, regardless of where the current HTML file resides. There are two common types:

• Full URL: includes protocol and domain (e.g., https://example.com/assets/logo.png).
• Root-relative: begins at the web server’s document root (e.g., /assets/logo.png).

Example – Full URL

Example – Root-Relative

2. Relative Paths

A relative path locates a resource based on the current HTML file’s folder. You don’t include the protocol or domain. Common patterns:

• Same directory: style.css, script.js
• Subdirectory: images/photo.jpg, css/main.css
• Parent directory: ../assets/icon.png
• Multiple levels up: ../../fonts/icon.woff2

Example – Relative References

Example – Navigating Up

3. Organizing Assets

Keeping assets in well-named folders improves clarity. A typical structure:

• css/ — stylesheets
• js/ — JavaScript files
• images/ — PNG, JPG, SVG, etc.
• fonts/ — custom font files
• docs/ — documentation or PDFs (optional)

Sample Project Tree

/project
├─ index.html
├─ about.html
├─ css
│  ├─ reset.css
│  └─ main.css
├─ js
│  ├─ vendor
│  │  └─ jquery.min.js
│  └─ app.js
├─ images
│  ├─ logo.png
│  └─ gallery
│     └─ img1.jpg
└─ fonts
   ├─ roboto.woff2
   └─ open-sans.ttf
  

4. Referencing Across Folders

When HTML files sit in different subfolders, adjust relative paths accordingly:

5. Best Practices

• Use root-relative paths for shared includes (e.g., header, footer) when deploying on the same domain.
• Use relative paths in local development or when moving folders around.
• Avoid mixing too many levels of ..; deep nesting can become fragile.
• Keep your asset folder names simple (css, js, images, fonts).
• Test paths in different environments (local server, staging, production).

Understanding absolute vs relative paths and organizing your assets consistently ensures that links remain valid, simplifies teamwork, and speeds up maintenance.