HTML File Paths

An HTML file path is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser. We can link any external resource to add in our HTML file with the help of file paths such as images, file, CSS style sheet file, JavaScript file, video, etc.

The src or href attribute requires an attribute to link any external source to HTML file.

Different types to specify file paths:

  1. <img src="picture.jpg"> It specifies that picture.jpg is located in the same folder as the current page.
  2. <img src="images/picture.jpg"> It specifies that picture.jpg is located in the images folder in the current folder.
  3. <img src="/images/picture.jpg"> It specifies that picture.jpg is located in the images folder at the root of the current web.
  4. <img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one level up from the current folder.

There are two types of File Paths:

  1. Absolute File Paths
  2. Relative File Paths

Absolute File Paths

Absolute file path specifies full URL address.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Using a Full URL File Path</h2>  
  5. <img src="https://www.javatpoint.com/images/nature-1.jpg" alt="image" style="width:300px">  
  6. </body>  
  7. </html>  
Output:


Relative File Paths

The relative file path specifies to a file which is related to the location of current page.

Example:

Let's take an example to see how the file path points to a file in the images folder located at the root of the current web.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Using a Relative File Path</h2>  
  5. <img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">  
  6. </body>  
  7. </html>  
Output:


Example:

This is how a file path points to a file in the images folder located in the current folder.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Using a Relative File Path</h2>  
  5. <img src="images/nature-3.jpg" alt="Mountain" style="width:300px">  
  6. </body>  
  7. </html>  
Output:


Example:

When the images folder located in the folder one level above the current folder.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Using a Relative File Path</h2>  
  5. <img src="../images/nature4.jpg" alt="Mountain" style="width:300px">  
  6. </body>  
  7. </html>  
Output:


Important Points for File path:

  • Always remember to use proper URL, file name, image name, else it will not display on the webpage.
  • Try to use relative file paths, so that your code will be independent.

 

Comments

Post a Comment

Popular posts from this blog

Tags of HTML With description Basic HTML Tag Description <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document’s body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!–…–> Defines a comment Formatting Tag Description <acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym <abbr> Defines an abbreviation or an acronym <address> Defines contact information for the author/owner of a document/article <b> Defines bold text <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead. Defines big text <blockquote> Defines a section that is quoted from another s
Read more