Absolute and relative paths to files.
✍️ 3 exercises + code challenge in this lessonA file path describes where a file (image, stylesheet, script, page) is located.
picture.jpg: in the same folder as the current page.images/picture.jpg: in the images folder inside the current folder./images/picture.jpg: in the images folder at the root of the site.../picture.jpg: one folder up from the current folder.https://example.com/picture.jpg: an absolute URL on another site.Mastering HTML File Paths helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<!-- Absolute URL (works anywhere) -->
<img src="https://picsum.photos/id/1043/240/140" alt="Absolute path example" width="240" height="140">
<!-- Relative examples (these files don't exist here) -->
<!-- <img src="images/logo.png"> -->
<!-- <link rel="stylesheet" href="../css/style.css"> -->
<p>Read the comments in the code for relative path examples.</p>Check what you learned in “HTML File Paths”.
Point to logo.png inside the images folder in the current folder.
<img src="" alt="Logo">
What does ../ mean in a file path?
Add a link with the text "Up" that points to index.html one folder up.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services