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

Posted by Brian Hodge
Brian Hodge
1,318 Points

HTML Lists Challenge 5/6

Code is written as shown below. Instructions are "Add a nested ordered list to the "Shapes" list item."

<!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>squares</li>
         </ol>
      <li>Colors</li>
    </ul>

3 Answers

Daniel McCarthy
Daniel McCarthy
1,862 Points
Daniel McCarthy
Daniel McCarthy
1,862 Points

Your nested list needs to be contained within the <li> tag. In your code above you've closed your list item tag and then started your new ordered list. Should be:

<li>Shapes
    <ol>
        <li>circles</li>
        <li>squares</li>
   </ol>
</li>

Or at least that's what worked for me :-)

Brian Hodge
Brian Hodge
1,318 Points
Brian Hodge
Brian Hodge
1,318 Points

Great thanks worked for me!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The reason that works is because the, only valid child element of an ul is an li, so if you want to nest a ol inside of a ul it firsts has to be nested inside of an li.

This is why, this is valid HTML:

<ul>
  <li>
    <ol></ol>
  </li>
</ul>

While this is invalid HTML:

<ul>
    <ol></ol>
</ul>