HTML File Paths

You can already write pages with headings, paragraphs, and comments. Real sites rarely live in a single file. Images, other pages, stylesheets, and scripts sit in folders next to your HTML — and HTML must point to them correctly. Those pointers are file paths. If a path is wrong, the file can exist on disk while the browser still shows a broken image or a dead link.

What is a file path?

A file path is the address the browser uses to fetch another file. You usually write it in attributes such as src (images, scripts, media) and href (links, stylesheets, many related resources). The path is not decoration. It is an instruction: “look here.” When the instruction is wrong, the request fails even though your markup tags look fine.

Direct answer

Use a relative path when the target file travels with your project folders — for example images/logo.png from a page in the same parent folder, or ../images/logo.png from a page one folder deeper. Use a root-absolute path starting with / when the site is hosted and every page should share the same path from the site root. Use a full URL (https://…) when the file lives on another host or CDN. Beginners should master relative paths first, because local practice folders depend on them.

Relative vs absolute at a glance

A small project map

Picture a folder named project. Inside it you have:

• index.html (home page)
• about.html (same folder as the home page)
• an images folder containing logo.png
• a pages folder containing contact.html
  The important habit is this: always ask which HTML file you are editing before you write src or href. The same image needs different relative paths from different pages.

Relative paths from the project folder

From index.html or about.html, images and pages are child folders. You do not need ../ to reach them.

Why these values work

• images/logo.png means “enter the images folder next to this HTML file, then open logo.png”
• pages/contact.html means “enter pages, then open contact.html”
• about.html means “another file in the same folder as the current page”
• The alt text is not a path; it is accessible text when the image cannot be shown
  If the logo is missing in the browser, check spelling, the real folder name, and whether you saved the HTML file in the folder you think you did.

Relative paths from a subfolder

contact.html lives inside pages/. From there, images/ is not a child of pages/. It sits beside pages/ under project/. You must climb one level with ../, then enter images/.

Reading ../

• ../ means “go up to the parent folder”
• ../images/logo.png means “up to project/, then into images/logo.png”
• ../index.html means “up to project/, then open index.html”
• Writing images/logo.png from contact.html looks for pages/images/logo.png, which does not exist in this map
  This single mistake — forgetting ../ from a subfolder — causes a large share of “broken image” reports in beginner projects.

Root-absolute paths and full URLs

A root-absolute path begins with / and is resolved from the site root on a real web server, not from the current folder. A full URL includes the protocol and domain. Full URLs are normal for third-party files. Root-absolute paths are useful on hosted sites when many pages should share one stable path.

Local files vs hosted roots

When you open an HTML file directly from disk (file://…), there is often no real website root. A path like /images/logo.png may not match the folder on your computer the way it will on a server. For local beginner practice, prefer relative paths that match your actual folders. After the site is hosted, root-absolute paths become more reliable across pages.

Practice: paths from a folder map

Folder shop contains:

• home.html
• an assets folder with hero.jpg
• a help folder with faq.html
  Do this in your editor:

1. In home.html, add an img that loads hero.jpg with a relative path.
2. In help/faq.html, add an img that loads the same file using ../.
3. From faq.html, add a relative link back to home.html.
4. Open both pages in the browser and confirm the image and the link work.
5. Intentionally break one path, refresh, see the failure, then fix it — that feedback trains your eye faster than reading alone.
   Expected relative answers for this map: assets/hero.jpg from home.html; ../assets/hero.jpg and ../home.html from faq.html.

Path mistakes that break pages

• Writing images/logo.png from a subfolder when the correct path needs ../images/logo.png
• Misspelling the file or folder name, or mismatching letter case on hosts that treat Logo.PNG and logo.png as different files
• Using Windows \ in web paths — prefer / in HTML attributes
• Putting a disk path such as C:\site\img.png in src or href for a normal web page
• Copying a root path /images/... into a project you only open as a local file, then assuming it must behave like a hosted site
• Linking to contact.html when the file actually lives at pages/contact.html
• Changing folders in Explorer/Finder but forgetting to update every path that pointed to the old layout

Summary

• File paths tell the browser where linked files live for src, href, and similar attributes
• Relative paths are resolved from the current HTML file’s folder
• ../ climbs one folder in a relative path; use it when the target sits above the current file
• Root-absolute paths start with /; full URLs include the protocol and domain
• Match the path style to your layout: relative for local project practice, root/URL when the hosting model needs them
• Broken paths are one of the most common reasons images and links “mysteriously” fail
• Always decide the path from the file you are editing, not from memory of a different page