Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,162 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.