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 breckconley
breckconley
1,470 Points

nested lists

how does this work?

<!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>
  <ol> <li>circles</li>
    <li> triangles</li></ol>
  <li> Colors</li>
    </ul>
  </body>
</html>

2 Answers

Luke Pettway
Luke Pettway
16,593 Points

breckconley you were actually very very close to solving it correctly.

You need to nest the <ol> inside of the <li> for shapes, it will look like this:

<ul>
    <li>Shapes
        <ol>
            <li>Square</li>
            <li>Circle</li>
        </ol>
    </li>
    <li>Colors</li>
</ul>

Nesting can get a little messy/confusing inside of list items because of the amount of tags in such a small section of code.

breckconley
breckconley
1,470 Points

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

<h1>HTML Lists Challenge</h1>

<ol>
  <li>Stop</li>
  <li>Drop</li>
  <li>Roll</li>
</ol><!-- Write your code below -->
<ul>
  <li>Shapes</li>
    <ol>
      <li>Squares</li>
      <li>Circles</li>
    </ol>
  </li>
  <li>Colors</li>
</ul>

</body> </html>

Luke Pettway
Luke Pettway
16,593 Points

Take the closing li tag after shapes </li> and place it after the closing ol tag </ol> . The entire <ol></ol> needs to be inside the <li></li> tags.

Melissa Austin
Melissa Austin
3,383 Points
Melissa Austin
Melissa Austin
3,383 Points

As Luke Pettway says nested lists can be confusing. Here is a live example on CodePen and further explaination at Mozilla.