Theory
Theory
Comments

Nested lists

The to-do list will be even more useful if it includes the cat’s favorite dishes. Therefore, it would be good to add a nested list or sublist to the item “Feed the cat”.

The <ol> and <ul> tags can be nested within each other in order to create multi-level lists. There are no restrictions on the number of levels in lists.

First, you need to create a first-level list, and then you need to add another list between the <li> and </li> tags for this list. In this case, you must carefully close all of the tags in the proper order:

<ol>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ol>

And here is an example of an error when the sublist <ul> is nested between <li> tags and not inside them:

<ol>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ol>

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Three. My cat is offended at me.</h1> <p>Yesterday, while I was on the Internet, I again forgot to feed my cat. I hope Muffin does not find out about this and continues to give me assignments. I’ll try to make a to-do list.</p> <ol> <li>Feed the cat  </li> <li>Water the cactus</li> <li>Turn off the light</li> <li>Leave the house to run errands</li> </ol> <p>I was looking for a ranking of games that were released in 2018 on the Internet. I’m not interested in them all. All I do is study. This is what I found:</p> <ol> <li>Red Dead Redemption 2</li> <li>Detroit: Become Human</li> <li>Spider-Man</li> <li>God of War</li> </ol> <p>Now I can continue my to-do list.</p> <ol> <ol> <li>Prepare to eat</li> <li>Play God of War</li> <li>Wash the dishes</li> <li>Go to sleep</li> </ol> </ol> <p>Now I will definitely not forget to do anything.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

Goalscompleted

Add an empty unordered list to the first item in the to-do list after the text Feed the cat
Add an element with the text Dry food to the embedded list,
then add an element with the text Fish cakes
and finally add an element with the text Ocean trout.

Nested lists

Comments

Log in

Sign up

Restore access