How to Reference a File From HTML


When making a website, you frequently have to reference local files for use on the website. This can be tricky with more complex websites because you may have to go up and down directories. A directory is simply a folder, and "going down" refers to clicking to go inside, and "going up" refers to going backwards to be in the folder where the current folder is. Referencing a file is easy if you follow these steps.

  • Go down directories by using a forward slash. If you have an image named example.jpg and it is down one directory from the current directory and the directory it is in is named images, then your file path would be “images/example.jpg”. The first directory you go into does not require a forward slash.

  • Go up directories with two periods and a forward slash. If your image named example.jpg is in a folder called images that is one folder up from your current directory, then your file path will be “../images/example.jpg”. This goes up one directory from the current directory, down into images, and down to find example.jpg.

  • Put it all together and create your file path. Going up two directories and down three directories looks like “../../oneDown/twoDown/threeDown/example.jpg”. Remember, this referencing can be used for image files (.jpg, .gif, .png), .html files, and any other type of file you can think of.

  • Add the path you have created to the HTML tag you’re using, or the path doesn’t do anything. If you’re placing an image on your website, the tag is <img src=”yourFilePath(.jpg, .gif, .png)” />, and if you’re creating a link, the correct tags are <a href=”yourFilePath.html”> ‘link text here’ </a>. Other times, you might use a file path are when you embed sound or video.

Tips & Warnings

  • Check capitalization if your path does not work. Double-check to make sure your path is correct if it doesn’t work after that.

Related Searches


  • Photo Credit Stockbyte/Stockbyte/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!