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

Posted by Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Add a nested ordered list to the "Shapes" list item.

Guys I dont really understand the question. What does it mean to Add a nested ordered list to list item?

Here is my code:

<!DOCTYPE html> <html> <head> <title>HTML Lists Challenge</title> </head> <body>

<h1>HTML Lists Challenge</h1>

<!-- Write your code below -->
<ol>
  <li>Stop</li>
  <li>Drop</li>
  <li>Roll</li>
</ol>

<ul>
  <li>Shapes</li>
  <li>Colors</li>
</ul>

</body> </html>

8 Answers

Laura Hill
Laura Hill
13,674 Points 
<!DOCTYPE HTML>
<ul>
        <li> Shapes
<ol>
<li>stop</li>
<li>look</li>
<li>listen</li>
</ol>
</li>
<li>Colors</li>
</ul>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This is how you want to nest it except the ordered list should be circle, and square like you have in your other answer.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Got it!! Thanks a lot guys. I appreciate the help!

J Scott Erickson
J Scott Erickson
11,883 Points
J Scott Erickson
J Scott Erickson
11,883 Points

A nested order list would be an ordered list in a list item

<ol>
  <li>Some Item Here</li>
  <li>
    <ol>
      <li>Item in Nested List</li>
    </ol>
  </li>
  <li>Some Item Here</li>
</ol>
Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Marc-Adems,

What you have right now is two separate lists. A nested list is a list inside of another list.

Currently your list items only contain text but you can put another list right inside one of your list items.

In this case, they want you to add another ordered list inside the "shapes" list item. You want to make sure that your ordered list is inside of the list item and that it comes after the word "Shapes"

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

It might help to see what the rendered lists would look like that the challenge is trying to get you to create.

  • Shapes
    1. Square
    2. Circle
  • Colors
Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Here is a guess. Feels like syntax is missing after "shapes" but validator did not complain. @JScott, would not the ol be contained within the li ?

<!DOCTYPE HTML> <h1>HTML Lists Challenge</h1> <ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol>

<ul> <li>Shapes <ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol> </li> <li>Colors</li> </ul>

J Scott Erickson
J Scott Erickson
11,883 Points

It is, my indentation is just wierd.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Laura,

Your html has been stripped out.

This should help: https://teamtreehouse.com/forum/posting-code-to-the-forum

Marc-Adems Dor
Marc-Adems Dor
2,854 Points
Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Still not working and I dont know what part of my code isn't working in that case. Maybe I'm doing something differently.

<ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol>

<ul>
<li>
  <ol>
    <li>Shapes</li>
    </ol>
  </li>
  <li>Colors</li>
</ul>
Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Ps thank you Jason!

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points 
<ul>
<li>Shapes</li>
<ol>
      <li>Circle</li>
      <li>Square</li>
</ol>
  <li>Colors</li>
</ul>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Almost there.

You want to put the ordered list inside the "Shapes" list item. It should be placed after the word "Shapes" but before the closing </li>

You can't have an <ol> as a direct child of a <ul> only <li>'s and scripts can be direct children of ordered and unordered lists.

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Hi Jason, It felt like the word Shapes was dangling :) The W3c validator also pointed our the rule about an ol cannot be a child of ul, Thanks! And thanks to Mark too for posting a good code challenge:))