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

Ryan Canty
PLUS
Ryan Canty
Courses Plus Student 5,665 Points
Posted by Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

Turn each list item into a link. The first item should link to cakes.html, the second to pies.html and the third to cand

What is wrong with this code?! I can't for the life of me figure it out....

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>

4 Answers

Valeriia O
PLUS
Valeriia O
Courses Plus Student 17,625 Points
Valeriia O
Valeriia O
Courses Plus Student 17,625 Points

You just need to switch your tags around, with the <li> on the outside and <a> on the inside.

<li><a href="cakes.html">Cakes</a></li>
<li><a href="pies.html">Pies</a></li>
<li> <a href="candy.html">Candy</a></li>
Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points
Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

I appreciate the response, thanks! But is there any practical reason for that apart from just passing the lesson? they both do the same thing

Kayla Novo
PLUS
Kayla Novo
Courses Plus Student 2,029 Points
Kayla Novo
Kayla Novo
Courses Plus Student 2,029 Points

You are actually hyper linking (<a> tag) on the text of each list item. The list item tag (<li>) is a formatting tag that tells the browser that what is to follow is just a member of the unordered list (<ul>). The anchor tag is actually linking the text which is why it should surround only the text.

I hope that explanation helps.

Valeriia O
PLUS
Valeriia O
Courses Plus Student 17,625 Points
Valeriia O
Valeriia O
Courses Plus Student 17,625 Points

From what I understand, it's because <li> is the child element of <ul>, so it has to come before <a>. I would also like someone else to elaborate on this...

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This is correct. It would not be valid html if the <li> tags were inside the <a> tags.

a tags can not be direct children of ul tags

Here's a link to the ul element section of the html5 specification: https://www.w3.org/TR/html5/grouping-content.html#the-ul-element

The specification is not an easy thing to read but the important thing here is what is listed for "Content Model:" This is the part that tells you what is allowed to be directly inside of the element in question.

Here it states:

Zero or more li and script-supporting elements.

So nothing else besides that can be directly inside a ul.

Quentin Jobs
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Quentin Jobs
UX Design Techdegree Graduate 23,599 Points
Quentin Jobs
.a{fill-rule:evenodd;}techdegree seal-36
Quentin Jobs
UX Design Techdegree Graduate 23,599 Points

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