Understand the idea

A relative path is interpreted in the context of a base URL. Moving a page into a folder can change that context even when the image markup stays identical.

Without a base element, images/turn.svg on https://example.com/notes/ resolves to https://example.com/notes/images/turn.svg. A leading slash instead starts at the origin root. The trailing slash matters: /notes is not the same base as /notes/. A server may redirect one to the other; check the final document URL.

Read the example

These are URL-resolution examples, not requests made by this lesson. There is no base element in this scenario.

Diagnostic notes · EXAMPLE
Page URL: https://example.com/notes/
images/turn.svg    → /notes/images/turn.svg
../images/turn.svg → /images/turn.svg
/images/turn.svg   → /images/turn.svg

Different resources have different bases

A URL in an external stylesheet is normally resolved relative to that stylesheet, not the HTML page. A CSS file at /assets/style.css using url(images/sky.svg) refers to /assets/images/sky.svg. Do not apply the document directory to every resource.

Check the published structure

  1. Read the final page address after any redirect.
  2. Inspect the exact requested asset URL.
  3. Compare it with the generated output and published location.
  4. Repair the source, rebuild and verify the deployed request.

Use forward slashes in web paths. A path to a folder on your own computer is not a public web address. Also check whether the upload accidentally added an extra outer folder.

Follow the nested-page case.

Continue the diagnostic toolkit

All six lessons and three cases · Next: Catch the capital letter

A small mistake, explained

What goes wrong

The homepage uses images/turn.svg successfully, so the same text is copied to a nested page. That page requests a different location.

How to fix it. Compare the resolved URL with the deployed asset path. Choose a relative or root-relative reference that fits your deployment. If the site lives under /demo/, a root-relative /images/ path does not automatically include /demo/.

Try it yourself

Write the expected resolved address before opening the nested-page trail. Then explain how it changes if the document moves one directory deeper.

Further reading

MDN: Resolving relative references (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.