10
 

Nested Lists

You can nest one list within another, just indent each asterisk (or number) of the nested list four spaces.
In fact, you can nest other elements like paragraphs, blockquotes or code blocks (more spaces to indent may be required).

Click on the red points to know more. Move through the exercises by using the buttons or the dot menu at the bottom.

Click on the red points to know more. Move through the exercises by using the buttons or by swiping left or right.

* First item\n* Second item\n* Third item\n\n1. First item\n2. Second item\n3. Third item.
  • More

    You can mix the two types of lists.

    Close
  • More

    To nest:
    A paragraph, it must be indented by either 4 spaces or one tab.
    A blockquote, it must be indented by at least one space.
    A code block, it must be indented by either 8 spaces or two tabs.

    Close

Convert the three paragraphs into an ordered list. In the second step, convert the list of ingredients into an unordered nested list.

Show generated HTML?

In this exercise, make an ordered list where CSS is the first item, HTML the second, and JS the third. Format the code as nested code blocks.

Show generated HTML?

Play with the concepts you just learned!

For example:
Nest paragraphs, blockquotes and code blocks inside of an element of an ordered list. Play with spaces.

See the generated HTML. Even if you don't know HTML, try to understand what's happening. Go wild!
Go to the next lesson when you're ready.

Show generated HTML?

Go to the next lesson