HTML File Paths
A HTML File Paths indicates where a file is located within the folder structure of a website.
File Path Examples
| Path | Description |
|---|---|
| <img src="picture.jpg"> | The "picture.jpg" file is located in the same folder as the current page |
| <img src="images/picture.jpg"> | The "picture.jpg" file is located in the images folder in the current folder |
| <img src="/images/picture.jpg"> | The "picture.jpg" file is located in the images folder at the root of the current web |
| <img src="../picture.jpg"> | The "picture.jpg" file is located in the folder one level up from the current folder |
HTML File Paths
A file path indicates where a file is located within the folder structure of a website.
When linking to external files, file paths are used, such as:
- Web pages
- Images
- Style sheets
- JavaScripts
Absolute File Paths
The complete URL to a file is called an absolute file path:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="River" title="Html File Paths 2" data-lazy-src="https://www.codingask.com/images/picture.jpg"><noscript><img decoding="async" src="https://www.codingask.com/images/picture.jpg" alt="River" title="Html File Paths 2"></noscript>
Relative File Paths
A file that is relative to the current page is referenced by a relative file path.
The file path in the example below refers to a file in the pictures folder at the current web root:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="River" title="Html File Paths 3" data-lazy-src="/images/picture.jpg"><noscript><img decoding="async" src="/images/picture.jpg" alt="River" title="Html File Paths 3"></noscript>
The file path in the example below refers to a file inside the current folder’s images folder:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="River" title="Html File Paths 4" data-lazy-src="images/picture.jpg"><noscript><img decoding="async" src="images/picture.jpg" alt="River" title="Html File Paths 4"></noscript>
The file path in the example below refers to a file in the photos folder, which is situated in the folder one level above the current folder:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="River" title="Html File Paths 5" data-lazy-src="../images/picture.jpg"><noscript><img decoding="async" src="../images/picture.jpg" alt="River" title="Html File Paths 5"></noscript>
HTML file path
folder structure
website
linking
external files
web pages images
style sheets
JavaScripts
absolute file path
relative file path
current page
current web root
current folder
photos folder
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
Understanding HTML File Paths: A Key Skill for Web Development
When working with HTML, properly managing file paths is crucial for linking various elements on your web pages. File paths dictate how your website’s folders and files are structured, and how they connect to one another.
There are two main types of file paths in HTML: absolute and relative. Absolute file paths provide the complete URL or directory location of a file, while relative file paths specify the location of a file in relation to the current page.
Absolute file paths are useful when linking to external resources, such as images, style sheets, or JavaScript files hosted on a different server. Relative file paths, on the other hand, are commonly used when linking to files within your own website’s folder structure.
Within your website’s folder structure, you may have a “photos” folder containing image files, a “css” folder for your style sheets, and a “js” folder for your JavaScript files. Properly structuring and referencing these file paths is essential for ensuring your web pages load correctly and link to the appropriate resources.
By mastering HTML file paths, you’ll be able to efficiently organize your website’s content, make updates and changes with ease, and provide a seamless browsing experience for your users.
When it comes to building websites, properly managing file paths is a fundamental skill. File paths determine how your web pages, images, style sheets, and other external files are linked and accessed. In this section, we’ll dive into the different types of file paths and how to use them effectively.
File paths refer to the location of a file within a website’s folder structure. There are two main types of file paths in HTML: absolute file paths and relative file paths.
Absolute file paths specify the complete URL (Uniform Resource Locator) of a file, including the domain name and the full directory structure. This type of file path is useful when linking to external resources that are not part of your website, such as images or stylesheets hosted on a different server.
Relative file paths, on the other hand, are based on the current location of the web page. They specify the file’s location relative to the current page or the website’s root directory. Relative file paths are commonly used when linking to files within your own website, as they are more flexible and easier to maintain.
Understanding the folder structure of your website is crucial when working with relative file paths. The current page, the current web root, and the current folder all play a role in determining the correct file path. For example, if you have a “photos” folder within your website’s root directory, you can link to an image in that folder using the relative file path “photos/image.jpg”.
By mastering HTML file paths, you’ll be able to effectively link your web pages, images, style sheets, and JavaScript files, ensuring a seamless user experience and a well-organized website structure.
