File Paths and URLs
What Is It?
A file path tells the browser where to find a page, image, or other file.
What the Tags Mean
href: destination of a link.src: location of an image or media file.../: go up one folder.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Paths and URLs</title>
</head>
<body>
<p>Imagine this page is saved as learning-club/index.html.</p>
<p id="result"></p>
<script>
const base = "file:///learning-club/index.html";
document.getElementById("result").textContent = new URL("about.html", base).href;
</script>
</body>
</html>Browser preview
What you see: The page displays the full path to about.html. It calculates the path without needing to open that file.
Example 2: Another Use
Use ../ to go up one folder. This example displays the path to the parent folder’s index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Paths and URLs</title>
</head>
<body>
<p>Imagine this page is saved inside a workshops folder.</p>
<p id="result"></p>
<script>
const base = "file:///learning-club/workshops/lesson.html";
document.getElementById("result").textContent = new URL("../index.html", base).href;
</script>
</body>
</html>Browser preview
Simple Tip
Use forward slashes in web paths. Match the file name and letter case exactly.
Try It Yourself
Create about.html beside index.html and link to it.