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 Basics Going Further with HTML Links and Paths Challenge

Posted by Angeline Mafemba
Angeline Mafemba
1,377 Points

Navigate to an Id

index.html 
<!DOCTYPE html> 
<html>
  <head>
    <title>Portfolio Page</title>
  </head>
  <body>
    <img src="../img/logo.png" alt="Site logo">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/#Portfolio"</a></li>                
    </ul>
    <h1 id="portfolio">My Portfolio</h1>
  </body>
</html>

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,970 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,970 Points

With the same page you just need to specify the id. In this case href="#portfolio".

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

When you linking to sections of your site with an id, you should only include the # sign in your href path because the leading / is primarily used to navigation to another directory and thus taking you off the current directory entirely. Which clarifies that your link is internal to the current page, meaning that all you need to supply is the # followed by the id name:

<li><a href="#portfolio">Portfolio</a></li>

Notice in my example above, you were also missing a closing ">" after your href attribute to close off the opening anchor tag. In between the opening anchor tag and closing tag you can insert text that the user will see and be able to click on to take them to that link that is placed inside the href value.

The same rules also apply for linking to files in the same directory, e.g. another page such as about.html:

<li><a href="about.html">About</a></li>