Learn HTML File Paths & URL Encoding Explained

Q: Can I use backslashes in paths?

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

HTML File Paths & URL Encoding Explained

DodaTech Updated Jun 6, 2026 7 min read

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.

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 -->

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.

Navigation: Going Up and Down

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>

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 Yourself Edit 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?

images/photo.jpg is relative (from the current page’s location). /images/photo.jpg is root-relative (from the site root).

Q2: What does ../ mean in a file path?

It means “go up one directory level.” Use ../../ to go up two levels.

Q3: How should spaces in filenames be handled?

Replace them with hyphens. If you can’t rename the file, encode the space as %20.

Q4: When would you use an absolute URL instead of a relative path?

When linking to resources on another domain (external images, other websites, CDN files).

Q5: What does <base href="..."> do?

It sets a default base URL for all relative links on the page. Use cautiously — it affects everything.

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 Tutorials