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

Make the text inside each list item a link. The first item should link to cakes.html, etc.

Make the text inside each list item a link. The first item should link to cakes.html, the second to pies.html and the third to candy.html.

I am having trouble with this challenge, it was brought as an unordered list:

<ul> <li>Cakes</li> <li>Pies</li> <li>Candy</li> </u>

Now, how do I place the text inside each list item a link?

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>

5 Answers

Mark Casavantes
PLUS
Mark Casavantes
Courses Plus Student 13,401 Points

Hello Alejandra,

Notice how the list <li> </li> goes around everything else. Next you "nest" the <a> </a> tags inside the <li> tags.

May I recommend a website to help you find and correct your future problems with HTML? Copy and paste your code into this website and it will identify your errors with a bit more detail than TeamTreehouse provides you. It will also let you know which lines are causing you problems. https://validator.w3.org/nu/#textarea

There is also a similar site for CSS. https://jigsaw.w3.org/css-validator/#validate_by_input

There is also a similar site for JavaScript. http://www.jslint.com/

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

I hope this is helpful to you.

I wish you well.

Happy Coding,

Mark

Thank you so much this helped. I wasn't placing any of it correctly. I figured it's easier to break it down... Since the challenge starts off making an unordered list

<ul> <li>Cakes</li> <li>pies</li> <li>Candy</li> </ul>

and then I need to remember the anchor tag for html and add to each unordered list...

<a> cakes </a>

then add <a href="#"> which is the attribute tag

The answer is

<ul> <li><a href="cakes.html">cakes</a></li> <li><a href="cakes.html">cakes</a></li> <li><a href="cakes.html">cakes</a></li> </ul>

This took me some time to figure out and also, I had to watch other videos to realize my mistake.

Thank you and happy coding to you too.

i tried this and it still didnt work at all

Jonathan Barclay Post your code

You're making the li elements into links as opposed to the text inside of each li element.

Also, I don't think your code will pass with the quotes you're using. You may be using a foreign keyboard? Quote characters that will work here include " and '. Yours are “. You may have to copy and paste mine to see the difference + to get this task to pass.

Let me know if this helps here

help! I done it every way it still wont except y answer. 'Candy.html' it telling me to add attributes to it . I have and its done nothing .

I had to watch other videos and realize my mistake. Thanks for all your posts and help, this is the correct code. I wasn't placing the list tag <li></li> or the </a> anchor closing tag correctly

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