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

Mark Collins
Mark Collins
2,955 Points
Posted by Mark Collins
Mark Collins
2,955 Points

HTML again

I am having great difficulty in nesting "Shapes" properly. Either I break the code in step 4 (above) or am told to add the ordered list to "Shapes". Help would be appreciated, thanks!

index.html 
<!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>

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

    </li>
      </ul>


  </body>
</html>

5 Answers

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Hey Mark,

the problem here is that you can't nest lists directly into other lists. You have to nest them inside of a list item. In this case you have to nest the ordered list in the list item that already contains "Shapes".

Like so:

<ul>
    <li>
        Shapes
        <ol>

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

If you have any trouble let me know. Also try to indent your code properly as it will help you to see the structure! :)

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Thanks Tobias, The code doesn't make sense to me, but it works! I'll have to muse over it for a bit. Thanks again, and yes, I am telling myself all the time - keep your code tidy!

Mark

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

No problem! If you want to you can let me know what confuses you and I'll try to help you to understand it! :)

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Hi Tobias, I don't understand why the item shapes is in an ordered list when the command follows it. I would expect the <ol> command to prefix the item.

Mark

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

I see. Like I already said before you shouldn't nest a list directly into another list. That's why you have to nest the ordered list inside of the unordered list's list item.

Now think of "Shapes" as the heading of the ordered list. It is however no element of the ordered list itself. So "Shapes" is a list item which is basically like a heading and has an ordered list as a "sublist".

I'm not sure if this is easy to understand with words and I think an example always shows something better than words can explain so I wrote two examples in Codepen which I hope show the big difference. You can check out the working example here on Codepen.

The first list is like I think you imagine it to look like. The second one is how it should look like.

<!-- Shapes in the ordered list -> no logical structure -->
<ul>
    <ol>
        Shapes
        <li>Circle</li>
        <li>Rectangle</li>
    </ol>
</ul>

<!-- Shapes in the li ol is nested in -> logical structure -->
<ul>
    <li>
        Shapes
        <ol>
            <li>Circle</li>
            <li>Rectangle</li>
        </ol>
    </li>
</ul>

If that doesn't make any sense to you let me know, but I hope it helps! :)

Mark Collins
Mark Collins
2,955 Points
Mark Collins
Mark Collins
2,955 Points

Yes it does make sense in a way, that is at least as a heading. Seems it's a format one is going to have to remember if circumsances dictate Thanks for your time and help!

Mark