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

Arvind Kevin Arjun Sharma
Arvind Kevin Arjun Sharma
8,272 Points

Somebody having the answer for this question, i really don't get this.

Set the "Portfolio" link to navigate to the section of the page with the id portfolio.

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">navigate</h1>
  </body>
</html>

2 Answers

Hello Arvind Kevin Arjun Sharma,

To create links to a link within the page, two HTML tags need to be used.

<html>
<a href="#top">Top</a>
</html>

This first tag is almost the same as any other HTML tag you would use to create a link to another page. However, to create a bookmark (anchor), you must start the link with a # (pound symbol,) which represents a name statement, used in the next tag. When the user clicks on the "Top" link, the computer would then go to the name tag, if found on the same page of the link.

<html>
id="top"
</html>

This next piece of code is where the link will go to on the page when the link is clicked.

Here is a example of what you are looking for

<!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">Portfolio</a></li>                
    </ul>
    <h1 id="Portfolio">navigate</h1>
  </body>
</html>

Hope that helped!

Tom Geraghty
Tom Geraghty
24,174 Points

You almost had it:

<!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">Portfolio</a></li>                
    </ul>
    <h1 id="portfolio">My Portfolio</h1>
  </body>
</html>

Now the href points to #portfolio which is the anchor tag name (aka ID) of the h1 with text My Portfolio.