Nested HTML files need carefully written relative paths. From pages/team.html, ../contact.html reaches contact.html in the parent folder. The important question is always where the link leads and whether the person reading the page can predict it.
What You Need to Know
Count folder levels, not visual indentation in the editor. Test a relative path from the actual URL of the page that contains the link.
Links navigate; buttons trigger actions. Choose by what a person expects to happen.
Links are the pathways through a website. The words on a link should help someone choose where to go before clicking it.
Example: See It in Action
Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
project/
pages/
team.html
contact.html
<!-- From pages/team.html, ../contact.html reaches the parent folder. -->Let’s Understand the Example
Follow the example from top to bottom. The indentation shows which information belongs together. Each line has a job, even when the browser does not draw it as something visible.
Look for the text “project/ pages/ team.html contact.html” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “project/ pages/ team.html contact.html”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Imagine this link is read out of context. Would its text still explain the destination? Rename unclear links before trying to make them look nicer with CSS.
Try It Yourself
- Create a link from a nested lessons page back to the homepage.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Writing contact.html from pages/team.html when contact.html lives one directory higher.
- Avoid dead links, empty href values and clickable-looking text without a real destination.
Key Takeaways
- Nested HTML files need carefully written relative paths.
- Focus on what the browser does with the markup, not just how the example looks.
- Links navigate; buttons trigger actions. Choose by what a person expects to happen.