HTML HTML Basics Going Further with HTML Links and Paths Challenge

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
PRO
KRIS NIKOLAISEN
Pro Student 51,773 Points

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

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 13,046 Points

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>