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

Shiva Lowy
seal-mask
.a{fill-rule:evenodd;}techdegree
Shiva Lowy
Full Stack JavaScript Techdegree Student 3,240 Points

I am not sure what I am doing wrong.

a bug? When I preview it it shows no errors.

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>

2 Answers

Jon Myzzle
Jon Myzzle
6,279 Points

Hello Shiva!

So, inside of your code you have:

<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>

The only thing that is allowed to be a direct child of a list element is the <li> or "list item". All you need to do is flip flop your <a> tag and <li> tags. See below as i've provided an example:

<!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>

Hope this helps! Cheers! :beers:

-Jon

Blayne Holland
Blayne Holland
19,321 Points

Do it like this with the anchor wrapped around the text instead of the entire list item. Its better practice to do this anyways if you want to target that element through CSS.

    <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>