Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Links Websites: Part 2

Sean Flanagan
Sean Flanagan
33,235 Points

Can't navigate from another_page.html back to index.html

Hi guys and girls. I can't navigate back to my first page. I'll copy the HTML code for both pages here, starting with index.html:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>

<body>

    <p>Our first page</p>

    <a href="links/my_directory/another_page.html">My Link</a>

</body>
</html>

Next, another_page.html:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>

<body>

    <p>Another page</p>

    <a href="../index.html">Go Back</a>

</body>
</html>

As always, thanks for any help on offer.

Sean

4 Answers

Justin Ellingwood
Justin Ellingwood
12,545 Points

Hey Sean,

From the href in your first page, I take it that your second page is two directory levels down from the first.

Try changing the href in the second one to this:

<a href="../../index.html">Go Back</a>
Sean Flanagan
Sean Flanagan
33,235 Points

Justin, you're a diamond! I input and implemented your code and it's worked. If my inference is correct, ../ takes you up one directory level, and I didn't go high enough?

Cheers friend :-)

Sean

Justin Ellingwood
Justin Ellingwood
12,545 Points

Yes, that's exactly correct. The two dots represent the parent directory of the directory you are currently in. You can chain them together to go as high in the directory hierarchy as you need to. You can even reference sibling directories using this notation.

For instance, if you had a directory on the same level as links called images, you could reference a file from that directory in your second page by saying something like:

<img src="../../images/picture.png" alt="whatever">

It's very flexible and you can use this to reference any location in your hierarchy.

Glad I could help. Hope things go smoothly!

Sean Flanagan
Sean Flanagan
33,235 Points

Thank you Justin and hand on heart, I hope things go smoothly for you also! Since everyone on here has bent over backwards to help me when I get stuck, I've emailed Customer Support and asked if they can set up some kind of private messaging facility whereby people can get to know each other and be friends without putting sensitive information like email addresses etc. in the public domain.

Sean :-)

Christopher Cudiamat
Christopher Cudiamat
6,232 Points

hi guys i have the same problem but the other way around..this coderight here is from my index.html ..if im in about html i can go back to index normally but when im in index.html i cant go to about.html..help please

<nav> <ul> <li><a href="#">home</a></li> <li><a href="../../about.html">about</a></li> <li><a href="#collections">collections</a></li> <li><a href="#contact">contacts</a></li> </ul> </nav>

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Christopher Cudiamat. I noticed your anchor to your about.html takes you 2 levels. Is that what you're trying to do?

I had trouble reading your code. Could you put three backticks (`) before your code and 3 more backticks after your code please? This will format your code and make it easier to read. For that purpose, I copied and pasted your code.

<nav> 
  <ul> 
    <li><a href="#">home</a></li> 
    <li><a href="../../about.html">about</a></li> <!-- ../../ goes up 2 levels. -->
    <li><a href="#collections">collections</a></li> 
    <li><a href="#contact">contacts</a></li> 
  </ul> 
</nav>