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 Getting Started with HTML Lists and Links Challenge

Posted by Mike van Hulst
Mike van Hulst
558 Points

It is constantly: Bummer; You need to set the 'href' attribute of the second <a> element to 'pies.html' What's wrong?

I have overlooked it a lot of times but to me all 3 list attributes look to be build up the same and look correct to me. Can someone tell me what is wrong in the code? Thanks a lot!

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lists and Links</title>
  </head>
  <body>
 <ul> 
   <a href="cakes.html"><li>Cakes</li></a>
   <a href="pies.html"><li>Pies</li></a>
   <a href="candy.html"><li>Candy</li></a>
    </ul>
  </body>
</html>

1 Answer

Felipe Giovanni de Moura Santos
Felipe Giovanni de Moura Santos
23,702 Points

Using <ul> and <li> tags for organizing navigation is incredibly common and useful. And that's where you did a little mistake. You're using a list for keeping things organized, and for that the <li> tag should be a direct child of the <ul> tag. You nested it inside your anchors when you should've done the opposite. 

<!DOCTYPE html>
<html>
  <head>
    <title>Lists and Links</title>
  </head>
  <body>
     <ul> 
       <li><a href="cakes.html">Cakes</a></li>
       <li><a href="pies.html">Pies</a></li>
       <li><a href="candy.html">Candy</a></li>
    </ul>
  </body>
</html>

An example of this is the Bootstrap nav component (this is one of several examples you'll find in the documentation):

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
Mike van Hulst
Mike van Hulst
558 Points

thank you very much Felipe. It's my first dat coding and getting late :-) I see what you mean now. Thanks for the tip as well! Greetz Mike