HTML File Paths

A file path indicates a file’s location within a website’s folder structure.

File paths are used for directing or linking to files within another HTML document. For example, a relative file path can begin with a dot-forward slash, indicating that it is one level up from the folder.

File Path Examples

PathDescription
<img src=”photo.jpg”>The “photo.jpg” file is in the same location as the present page
<img src=”images/photo.jpg”>The “photo.jpg” file is in the images folder of the current folder.
<img src=”/images/photo.jpg”>The “photo.jpg” file is in the images folder at the root of the current website.
<img src=”../photo.jpg”>The “photo.jpg” file is in the folder one level above the current folder.

HTML File Paths

A file path indicates the location of a file within the folder structure of a website. When connecting to external files, file paths are used, such as:

Web pages
Images
Style sheets
JavaScripts

There are two types of file paths:

Absolute File Paths
Relative File Paths

Absolute File Paths

The absolute file path specifies the full URL address.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Absolute Paths Example</title>
</head>
<body>
    <h1>Welcome to Technalay</h1>
    <img src="/project/images/logo.png" alt="Logo">
</body>
</html>
HTML

Relative File Paths

The relative file path refers to a file connected to the current page’s location.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Relative Paths Example</title>
</head>
<body>
    <h1>Welcome to Technalay</h1>
    <img src="images/logo.png" alt="Logo">
</body>
</html>
HTML

Important Points for File Path:

  • Always use the correct URL, file name, and picture name, or the image will not display on the webpage.
  • Use relative file paths to keep your code independent of the URL.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *