Spaces, case and special characters in URLs
Only the lowercase, hyphenated name stays readable. encodeURIComponent turns each special character into % codes; é becomes two codes because it takes two bytes in UTF-8.
A website is a folder of files, and every link, image and stylesheet finds its file through a path; relative paths start from the current page's folder, index.html is the default page of a folder, and on real servers letter case and spaces matter.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Your site has index.html, css/main.css, images/hero.jpg and pages/contact.html. Write the <link> and <img> tags for pages/contact.html using relative paths.
In css/main.css, write a rule that sets body's background to images/hero.jpg.
Rename these files safely: Team Photo.PNG, About Us.html, Price List (2026).pdf.
Explain it without notes
How does the browser work out where a relative path points?
What is the difference between images/a.png, ./images/a.png, ../images/a.png and /images/a.png?
Why does a site that works on your laptop sometimes break when deployed?
Why is index.html special?
Preview
Console
Nothing logged yet.Expected console output
My Photo (1).JPG → https://my-site.com/images/My%20Photo%20(1).JPG
my-photo-1.jpg → https://my-site.com/images/my-photo-1.jpg
café menu.png → https://my-site.com/images/caf%C3%A9%20menu.png
50% off.png → https://my-site.com/images/50%25%20off.png
Same file on Linux? false