A relative link is a path written from the page that contains it, so the whole site keeps working when its folder moves. This skill appears in every task that links pages together or places an image, and it explains most “my picture has disappeared” problems in website authoring.
How do you read a folder tree?
Look at the invented site folder from the module guide:
club/
index.html
style.css
pages/
events.html
images/
hall.jpgA path starts at the page that holds the link. A folder name goes down into that folder, and ../ goes up one level. Only the position of the files relative to each other matters, never the drive letter.
How do you write the path step by step?
- Find the page that will contain the link or image.
- Find the target file and note its folder.
- Climb up with
../once for each folder you must leave. - Go down by naming each folder you must enter.
- Finish with the exact file name and extension.
- Click the link in a browser to prove it works.
Worked example
Link 1: from index.html to events.html. Both are in different places: events.html is inside pages. No climbing is needed, so the path goes down:
<a href="pages/events.html">Events</a>Link 2: from events.html back to index.html. The page is inside pages, and the target is one level up:
<a href="../index.html">Home</a>Image: events.html also shows hall.jpg. Climb out of pages, then go down into images:
<img src="../images/hall.jpg" alt="Club members in the school hall">The same idea checks all three: leave pages with ../, then name the folders to enter.
The mistake to watch for
A common slip is copying a path that the computer shows, not one written from the page.
<a href="C:\Users\Aina\Desktop\club\index.html">Home</a>This opens on the author’s own computer and fails everywhere else, including on the marker’s computer. A second version of the same mistake writes images/hall.jpg on events.html: that path looks for pages/images/hall.jpg, which does not exist. The correction in both cases is a relative path counted from the page: ../index.html and ../images/hall.jpg.
Check yourself
1. From index.html, write the link path to images/hall.jpg.
Show answer
images/hall.jpg. The image folder is directly below the home page folder, so no ../ is needed.
2. A page at pages/events.html links to pages/contact.html. Write the href.
Show answer
contact.html. Both files are in the same folder, so the page name alone is enough.
3. The file is Hall.JPG on disk, but the page says src="../images/hall.jpg". What may go wrong?
Show answer
The capital letters and extension do not match, so a case-sensitive server will not find it. Write the name exactly: ../images/Hall.JPG, or better, rename the file to lower case.
Where this leads next
Now that your paths work, place and describe a picture properly in Size an image with meaningful alternative text. Return to the module guide, and test your own folder with the practical task and evidence checker.
Students can read a folder tree in class and still miscount the ../ steps in a real task. Our teachers practise that route with you in online one-to-one ICT tuition.