HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML File Paths

One of the most common thing that many people get confused about is linking to other pages, images, especially when it comes to absolute and relative paths.

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files like:

  • Images
  • Style sheets
  • JavaScripts
  • Web pages

Absolute File Paths

An absolute path is a path that starts right from the root of your file system. It always contains full URL of a file.

Run code

Relative File Paths

A relative path, is a path starting from the Current Directory. A relative path is only a portion of the full path.

If the file was stored in the same folder as the current page, the relative path would be "car.jpg":

Run code

If the file was stored inside a folder named "images" within the root directory, the relative path would be "/images/car.jpg":

Run code

If the file was stored inside a folder named "images" within the current directory, the relative path would be "images/car.jpg":

Run code

If the file was located one folder up from the current directory, the relative path would be defined as "../images/car.jpg":

Run code

This example point to an external JavaScript file which is stored inside a folder named "tags" within the root directory:

Run code

This example point to an external CSS file which is stored in the root directory:

Run code

HTML File Path Examples

Path Description
<img src="car.jpg"> car.jpg is located in the same folder as the current page
<img src="images/car.jpg"> car.jpg is located in the images folder located in the current folder
<img src="/images/car.jpg"> car.jpg is located in the images folder located at the root of the current web
<img src="../car.jpg"> car.jpg is located in the folder one level up from the current folder
<img src="../../car.jpg"> car.jpg is located in the folder two level up from the current folder