HTML Tutorials


» Introduction to HTML


» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols


» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata


» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width


» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select


» Login Page

.. » HTML » Introduction » File Paths
Share Tweet WhatsApp

File Paths

Most of the time, you will be needing to work with file paths on links, images, videos, audios and a lot of others. A file path just as the name may relate is simply the path leading to where a file or document is existing either on the internet or your local computer. In simpler terms, it is where all the various files you may be needing to develop your webpage are located. Such files may include your images, videos, audios, JavaScript's scripts, CSS files, other web document and a whole lot of others. It is therefore important to understand how to link up with these files since only that can make them available for your use. To help you understand file paths, we have categorize them into two namely, 1. Absolute File Paths 2. Relative File Paths Absolute File Paths An absolute file path is simply the full path to where a file or resource is located on the internet or your local computer. Such paths are mostly used to access files located or hosted on other websites or servers/computers. For example, to use an image located on for my webpage, I need to specify the full URL to that file which may be, But that does not mean you cannot use your website's absolute paths on your webpage. You don't necessarily have issues working with absolute file paths since you simply specify the full path or URL to where a file is located and boom, you have access to it. Relative File Path Just as the name connotes, relative file path is a path to a file that is in relation to your webpage. That is, the file is on the same server/computer with your web/HTML document. Therefore, you may not necessarily need to link up to it absolutely. For example,
<a href='login.html'>LOGIN HERE</a>
<img src='tree.png'/>
In the above examples, an HTML hyperlink is linking to an HTML document(login.html) existing in same folder as the webpage. On the other hand, an image element was created with an image (tree.png) existing on the same folder as the webpage. OTHER EXAMPLES OF RELATIVE FILE PATHS
img.pngSame folder with the webpage.
gallery/img.pngA folder(gallery) in same folder with the webpage houses the file.
gallery/pictures/img.pngA folder(gallery) in same folder with the webpage houses another folder(pictures) where the file is located.
../img.pngA step backward from the webpage.
../gallery/img.pngA step backward from the webpage and then, inside a folder(gallery).
../../img.pngTwo steps backward from the webpage.
../../../img.pngThree steps backward from the webpage.
  • The folders and file names used in the examples above were merely for exampling purposes only. This means your files and folders can be named whatever and with whatever extensions.
  1. A file path is a link or URL or path to where a file is located.
  2. We can classify file paths into absolute or relative.
  3. An Absolute file path is the full name to where a file is located.
  4. A Relative file path is just the file name or some other basic folders to where a file is located.
  5. Absolute file paths are mainly used when the file is in another website while relative paths are used when the file is existing in same computer as our website or webpage.
  6. Understanding file paths helps us know how to access folders and files and then, use them for whatever purposes.
Take a short quiz on File Paths.
Ask a question or tell us if File Paths is easy or not.

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.

StackBeginner 2021 © Joseph Omamode