File Path in HTML
A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure. This is specially used to find the exact location of the file from the desired folder means it exactly works as a guideline or address of a particular file which is web browser going to call. This concept in HTML mainly used to detect file paths of images, WebPages, and files, CSS file, Script file, media files like video, etc. One can find the path of the file by using two attributes called src or href. Those attributes help us to attach an external file or source with our HTML document.
Syntax
It’s an important thing to know the path of files which are going to include in web pages.
So here is the syntax to include these files in webpages as follows:
Syntax:
<img src="" alt="">
This is used to insert the image into our webpage.
Here is a list of some path with its description is as follows:
-
: This is used when we are going to use an image from the same folder treating as the current page. -
: It is used to indicate that the given image is stored in the image folder in the same website folder. -
: This is used to define respective is stored into the image folder of the root where the current web folder is located. -
: This type tells the user, given image is stored exactly one level upwards from the current folder of the website.
Those file paths are used in the code whenever there is a need to add some external files like webpages, images, style files, script files, and more things.
While defining the file path, it’s always necessary to include the exact URL, proper file name, and exact image name with the proper extension. If all those things are properly included, then the included file or image will be displayed properly on the webpage.
The above syntax is divided into two types. One is for the Absolute file path, which is based on URL address. Another is for the Relative file path, where we can define the address of files and images by giving simple its name or folder path to access contents from it.
We will see both the types of the File path in detail in the following section, where it will demonstrate how it actually is going to work.
How does the file path work in HTML?
There are two types of file paths: Absolute File Path and another is Relative File Path.
The absolute file path is used whenever we are using a full URL address for defining the file path.
Syntax: src=”url”;
Example: Here is the actual code to define how Absolute file path code going to work in website structure:
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <body> <img src="https://www.BeautyofNatur /image.png" alt="My Image" style="width:400px"> </body> </html>
Whereas the Relative File path is used to define a specific path to the file where actually all images are located with respect to the current folder.
Syntax:
src="img_folder/img_name" or src="/img_folder/img_name" or src=""../img_folder/img_name or
Here we are going to include an example which is having all possible ways to display file path using Relative File Path is as included bellows:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h4>Example showing file in same folder </h4> <img src="images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file present in a folder above its current folder </h4> <img src="../images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file available in a folder, which is exactly located at root position of its current sub folder </h4> <img src="https://cdn.educba.com/images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> </body> </html>
It’s always considered good practice to use a Relative file path rather than an absolute file path concept.
Examples of File Path in HTML
Here are the following examples mention below
Example #1
This is the example which going to show how Absolute File Path going to Work. Code for it as follows:
Code:
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <h2>Absolute File Path</h2> <p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p> <body> <img src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain"> </body> </html>
Output:
Example #2
Code:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p> <h4>Relative File path with image in same folder </h4> <img src="images/flag.png" style="width:100px; height:100px; "> <h4>Relative File path with image present in a folder above its current folder </h4> <img src="../images/flag.png" alt="Image demo "style="width:100px; height:100px; "> <h4>Relative File path with image available in a folder, which is exactly located at root position of its current sub folder</h4> <img src="https://cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; "> </body> </html>
Output:
Example #3
Code:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p> <h4>Relative File path with image in same folder </h4> <img src="images/EDUCBA.png" style="width:250px; height:150px; "> <h4>Relative File path with HTML file present in the folder </h4> <a href="index.html"> HTML file </a> <h4>One can give Style path through Absolute or Relative position. Here we are using relative file path</h4> <a href="main.css"> CSS file </a> </body> </html>
Output:
Conclusion
From all the above information, we realised that the HTML file is used to define the address or path of files or images where they are actually stored in the website structure.
That file path is shown in two possible ways: Absolute File Path, where another is for Relative File Path, as we saw in the above information.
The above is the detailed content of File Path in HTML. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to import bookmarks from other browsers by Chrome browser_Crome import bookmark data operation guide
Sep 25, 2025 am 10:18 AM
First, you can directly migrate other browser data through the built-in "Import Bookmarks and Settings" function of Chrome; secondly, if you already have an HTML format bookmark file, you can import it through the Bookmark Manager; finally, you can manually copy the original browser bookmark file and convert it to HTML and then import it.
What is the doctype in HTML
Sep 26, 2025 am 05:43 AM
The answer is to declare HTML5 document types, ensuring that the browser renders the page in standard mode. It prevents the browser from entering quirks mode and ensures cross-browser consistency. HTML5's doctype is concise and case-insensitive, and is suitable for all modern web development. The old version of doctype is outdated and is only used when maintaining old websites. New projects should always be used.
How to disable form autocomplete in html?
Sep 26, 2025 am 12:08 AM
Useautocomplete="off"ontheformorinputfieldstodisableautocomplete.2.Forpasswordfields,useautocomplete="new-password".3.Browserbehaviormayvary;testaccordingly.
How to export bookmarks by QQ browser QQ browser bookmarks as HTML files operation tutorial
Sep 25, 2025 am 10:27 AM
If you want to save bookmarks in QQ browser as HTML files for use in other browsers or for backup, you can complete the export operation through the built-in bookmark management function. The following are the specific operation steps: The operating environment of this article: Xiaomi 14, Android 14 1. Export the bookmark management page through the bookmark management page. The QQ browser provides a bookmark management interface. In this interface, users can directly export all bookmarks into standard HTML format files, which facilitates cross-platform migration. 1. Open QQ browser and click the bookmark icon in the menu bar at the bottom. 2. After entering the bookmark page, click the three-dot menu (more options) in the upper right corner. 3. Select Bookmark Management in the pop-up menu. 4. On the bookmark management page, click Import/Export at the top
How to get user media (camera and microphone) in HTML5?
Sep 26, 2025 am 02:34 AM
First, use the MediaDevices.getUserMedia() API to request the user's camera and microphone permissions, and run it through HTTPS or localhost in a secure context; then add the video element with autoplay and muted attributes to the HTML to automatically play the media stream; then call navigator.mediaDevices.getUserMedia() and pass in the {video:true,audio:true} constraint object. After success, bind the returned media stream to the srcObject of the video element; if the user refuses authorization or the device is unavailable, handle Pe in the catch
How to change font size in HTML
Sep 26, 2025 am 01:52 AM
Use the font-size attribute of CSS to flexibly control the HTML font size, support inline, internal and external style sheets, and it is recommended to use external CSS files to achieve unified management of multiple pages, and select units such as px, em, rem or % according to design needs.
How do you add comments in HTML5?
Sep 26, 2025 am 04:23 AM
HTML comments are surrounded by, and the browser ignores the contents, which can be used to add instructions or temporarily disable code. 1. Example of single-line comments: 2. Multi-line comments can contain information such as author, date, etc.; 3. You can wrap the code with comment symbols to temporarily hide elements; 4. Note that comments cannot be nested, and avoid using --> characters in comments to avoid ending comments in advance. Correct use of comments can improve code readability, but should be used in moderation.
How to make a text bold in html?
Sep 26, 2025 am 05:18 AM
Useforimportanttextwithsemanticmeaning,2.Useforvisualboldingwithoutimportance,3.UseCSSfont-weightfordesigncontrol;choosebasedonpurpose.
