HTML File Paths

[Guest]

HTML File Paths


A file path describes the location of a file in a web site's folder structure.

File Path Examples

PathDescription

<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 describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:

Web pages
Images
Style sheets
JavaScripts


Absolute File Paths
An absolute file path is the full URL to a file:

Example

<img src="https://www.w3schools.com/images/picture.jpg"
alt="Mountain">

Try it Yourself »


The <img> tag is explained in the chapter: HTML Images.








Relative File Paths
A relative file path points to a file relative to the current page.
In the following example, the file path points to a file in the images folder located
at the root of the current web:

Example

<img src="/images/picture.jpg"
alt="Mountain">

Try it Yourself »

In the following example, the file path points to a file in the images folder located in the
current folder:

Example

<img src="images/picture.jpg"
alt="Mountain">


Try it Yourself »

In the following example, the file path points to a file in the images folder located in the
folder one level up from the current folder:

Example

<img src="../images/picture.jpg"
alt="Mountain">


Try it Yourself »


Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current
base URL. All links will work on your own computer (localhost) as well as on
your current public domain and your future public domains.












★
+1

Reference: https://www.w3schools.com/html/html_filepaths.asp

[alexseen]

Estaba en casa en Madrid y quería algo divertido para desconectar un rato. Buscaba un sitio simple para casino online y apuestas. Probé magnetic slots y me gustó la variedad de juegos y promociones disponibles en España. También ofrecen guías que ayudan a entender los juegos mejor. Me relajó y me dio tema de conversación con amigos mientras jugábamos.

[klopeta]

Today I saw a dead bird right in front of my house. It caught me off guard and I couldn’t stop thinking about it. I looked it up later and saw that some people consider a dead bird an omen or a sign of change on a spiritual level. I don’t fully know what to make of that, but it definitely left an impression on me. Maybe it means something, maybe it doesn’t. Either way, it made me pause and think more about what’s been going on in my life lately.

[BeatricePeterson]

File paths, those breadcrumbs guiding the browser home! Think of them as addresses for digital treasures. It's all about figuring out where things actually are in the web's messy attic, you know? Sometimes relative paths are just plain easier. Once, back in my fledgling web design days, I spent hours troubleshooting a broken image because I'd used an absolute path on my local machine that of course didn't exist online. The drift hunters within me were searching hard. I was pulling my hair out until I realized my error!

[Tully223]

Understanding HTML file paths is crucial for seamless web development. Think of it like navigating a complex Eaglercraft server; you need the right coordinates to find what you're looking for. Whether it's locating images or linking to other webpages, mastering these paths ensures your website elements load correctly.