Skip to content

HTML File Paths & URL Encoding Explained

DodaTech Updated 2026-06-06 9 min read

In this tutorial, you'll learn about HTML File Paths & URL Encoding Explained. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

HTML file paths tell the browser where to find resources — images, stylesheets, scripts, and other pages — using absolute URLs or relative paths to navigate your project's folder structure.

What You'll Learn

By the end of this tutorial, you'll understand the difference between absolute, relative, and root-relative paths; know how to navigate parent and child directories; understand URL encoding for special characters; and follow best practices for organizing files.

ℹī¸ Info

Prerequisite: You should know basic HTML tags. HTML Basics covers everything you need.

Why File Paths Matter

Imagine you're giving someone directions to your house. You could say "123 Main Street" (absolute — works from anywhere) or "three houses down from the corner store" (relative — depends on where you start). File paths work the same way.

Every time you link to a page, embed an image, or load a stylesheet, you're using a file path. A wrong path means a broken link or missing image. Understanding paths means fewer broken resources.

Real-world use: Every <img src="...">, <a href="...">, <link href="...">, and <script src="..."> uses a file path.

Where This Fits in Your Learning Path

flowchart LR
    A["HTML & JavaScript"] --> B["**File Paths & URL Encoding**"]
    B --> C["Head & Meta"]
    C --> D["Entities & Symbols"]
    D --> E["Responsive HTML"]
    E --> F["Master HTML Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Absolute vs Relative Paths

There are three types of paths in HTML:

Type Example Description
Absolute https://example.com/images/photo.jpg Full URL — protocol, domain, path
Relative images/photo.jpg Path relative to the current page's location
Root-relative /images/photo.jpg Path relative to the site root (starts with /)

Absolute URLs

An absolute URL includes everything — the protocol (https://), the domain (example.com), and the path. It works from any page, but you'd only use it for external resources:

<img src="https://picsum.photos/400/300" alt="Photo from external site">
<a href="https://google.com">Go to Google</a>

Relative Paths

A relative path starts from where the current page is located. Think of it like giving directions from where you're standing:

Project folder:
├── index.html          ← you are here
├── about.html
├── images/
│   └── logo.png
├── css/
│   └── style.css
└── pages/
    └── contact.html
From To Path Meaning
index.html images/logo.png images/logo.png Go into images/ folder
pages/contact.html images/logo.png ../images/logo.png Go up one level (../), then images/
pages/contact.html css/style.css ../css/style.css Go up one level, then css/
Any page index.html / or ../index.html Go to site root

Root-Relative Paths

A root-relative path starts with / and goes from the site root (the homepage's folder). It works from any page because it always starts from the same place:

<img src="/images/logo.png" alt="Logo">
<!-- From any page, this resolves to http://yoursite.com/images/logo.png -->
💡 Tip

Use root-relative paths (/images/photo.jpg) for shared assets like logos, global CSS files, and common images. They work from any page on your site and don't break when you move a page to a different folder.

The key symbols for relative paths:

Symbol Meaning Example
filename Same directory photo.jpg
folder/filename Subdirectory images/photo.jpg
../ Up one level ../photo.jpg
../../ Up two levels ../../photo.jpg

Think of ../ as "go back one step" — like the "back" button in a file explorer. Each ../ goes up one folder level.

<!-- Same directory -->
<img src="photo.jpg" alt="Photo">

<!-- Subdirectory -->
<img src="images/photo.jpg" alt="Photo">

<!-- Parent directory -->
<img src="../images/photo.jpg" alt="Photo">

<!-- Site root (always works) -->
<img src="/images/photo.jpg" alt="Photo">

<!-- Absolute URL -->
<img src="https://example.com/images/photo.jpg" alt="Photo">

File Path Best Practices

Follow these rules to keep your paths clean and avoid broken links:

Rule ✅ Good ❌ Bad
Lowercase names about-us.html About-Us.html
Hyphens for spaces my-photo.jpg my photo.jpg
Descriptive names btn-submit.png img01.png
Keep it flat (2-3 levels) images/icons/ assets/img/icons/2024/
No special characters style.css style(v2).css

URL Encoding

Some characters can't be used directly in URLs. They must be percent-encoded (replaced with % followed by their hex code):

Character Encoded Why It's a Problem
Space %20 Spaces break URLs
& %26 Browser thinks it starts a query parameter
? %3F Starts the query string
# %23 Starts a fragment identifier
/ %2F Path separator (if inside a filename)
% %25 The escape character itself 
<!-- ❌ Wrong: space in filename -->
<img src="my photo.jpg" alt="Photo">

<!-- ✅ Correct: encoded space -->
<img src="my%20photo.jpg" alt="Photo">

<!-- ✅ Better: no spaces at all -->
<img src="my-photo.jpg" alt="Photo">

<!-- URL with encoded query string -->
<a href="/search?q=html%20tutorials&page=1">Search</a>

Practical tip: Just avoid spaces and special characters in filenames. Use hyphens instead. This eliminates the need for encoding entirely.

The <base> Element

The <base> element sets a default base URL for all relative links on the page:

<head>
  <base href="https://example.com/">
</head>
<body>
  <!-- Resolves to: https://example.com/images/photo.jpg -->
  <img src="images/photo.jpg" alt="Photo">
</body>
⚠ī¸ Warning

Use <base> cautiously — it affects ALL relative URLs on the page, including <a> links, <img> sources, <form> actions, and even anchor links (#section). It can break things if you're not careful.

Common File Path Mistakes

1. Using the Wrong Number of ../

<!-- ❌ Wrong: file is two levels up, not one -->
<img src="../images/photo.jpg" alt="Photo">

<!-- ✅ Correct: two ../ to go up two levels -->
<img src="../../images/photo.jpg" alt="Photo">

2. Mixing Absolute and Relative Incorrectly

<!-- ❌ Wrong: relative path with domain prefix -->
<img src="mysite.com/images/photo.jpg" alt="Photo">

<!-- ✅ Correct: either absolute (with https://) or relative -->
<img src="https://mysite.com/images/photo.jpg" alt="Photo">
<!-- or -->
<img src="/images/photo.jpg" alt="Photo">

3. Spaces in Filenames

<!-- ❌ Wrong: space breaks the path -->
<img src="my photo.jpg" alt="Photo">

<!-- ✅ Correct: hyphens instead of spaces -->
<a href="about-us.html">About Us</a>

4. Case-Sensitivity Issues

<!-- ❌ Wrong: file is "Photo.jpg" but path says "photo.jpg" -->
<img src="photo.jpg" alt="Photo">

Some servers are case-sensitive (Linux). Photo.jpg and photo.jpg are different files. Always use lowercase.

5. Forgetting to Update Paths When Moving Files

If you move a page to a different folder, all its relative paths break. Use root-relative paths (/images/logo.png) for shared assets to avoid this.

Try It Yourself

This sandbox shows how paths work with a simulated project structure:

▶ Try It YourselfEdit the code and click Run

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What's the difference between images/photo.jpg and /images/photo.jpg? {{< details "Show answer" >}} images/photo.jpg is relative (from the current page's location). /images/photo.jpg is root-relative (from the site root). {{< /details >}}

Q2: What does ../ mean in a file path? {{< details "Show answer" >}} It means "go up one directory level." Use ../../ to go up two levels. {{< /details >}}

Q3: How should spaces in filenames be handled? {{< details "Show answer" >}} Replace them with hyphens. If you can't rename the file, encode the space as %20. {{< /details >}}

Q4: When would you use an absolute URL instead of a relative path? {{< details "Show answer" >}} When linking to resources on another domain (external images, other websites, CDN files). {{< /details >}}

Q5: What does <base href="..."> do? {{< details "Show answer" >}} It sets a default base URL for all relative links on the page. Use cautiously — it affects everything. {{< /details >}}

Challenge

Create a multi-page site structure with:

  • An index.html at root level
  • A pages/about.html page
  • A pages/blog/ folder with a post.html
  • Each page links to the others using relative paths
  • An images/ folder with placeholder images linked from each page

Frequently Asked Questions

Do absolute URLs always need https://?

For external links, yes — always include the protocol. For same-site absolute URLs, you can start with // (protocol-relative) or just / (root-relative).

Why do my images work locally but not on the server?

Causes: case-sensitivity (Linux servers are case-sensitive), missing files, wrong path depth (different folder structure on server), or spaces in filenames.

Can I use backslashes in paths?

No. Windows uses \ but the web uses /. Always use forward slashes in HTML paths.

What's Next?

Now let's explore the hidden part of every HTML page:

HTML Head & Meta
Title, meta tags, favicon
Entities & Symbols
Special characters and emojis
Responsive HTML
Mobile-first approach

What's Next

Congratulations on completing this Html File Paths tutorial! Here's where to go from here:

  • Practice daily — Consistency is more important than long study sessions
  • Build a project — Apply what you learned by building something real
  • Explore related topics — Check out other tutorials in the same category
  • Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

← Previous HTML & JavaScript Explained — Script Tags, Events & Best Practices Next → HTML Head & Favicon Explained — Meta Tags, Title & Style Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Html