---
title: Lists
---

### Ordered Lists

<ol>
  <li>Do this</li>
  <li>Then this</li>
  <li>Finally this</li>
  <li>Then we'll go one deeper</li>
  <ol>
    <li>Dillon</li>
    <li>Francis</li>
    <ol>
      <li>What if we went...</li>
      <li>One more deeper?</li>
      <ol>
        <li>DJ</li>
        <li>Hanzel</li>
        <ol>
          <li>Five levels should be enough</li>
          <li>Right?</li>
        </ol>
      </ol>
    </ol>
  </ol>
  <li>But don't forget this</li>
</ol>

### Unordered Lists

<ul>
  <li>Let's try this</li>
  <li>Let's try this again</li>
  <ul>
    <li>And now we are nested</li>
    <li>Pretty cool?</li>
    <ul>
      <li>The list items are just text</li>
      <li>From this font</li>
      <ul>
        <li>We'll keep going</li>
        <li>Until we hit</li>
        <ul>
          <li>LEVEL 5</li>
        </ul>
      </ul>
    </ul>
  </ul>
  <li>And now we're are the top!</li>
</ul>

#### Codes:

```html
<ol>
  <li>Do this</li>
  <li>Then this</li>
  <li>Finally this</li>
  <li>Then we'll go one deeper</li>
  <ol>
      <li>Dillon</li>
      <li>Francis</li>
      <ol>
        <li>What if we went...</li>
        <li>One more deeper?</li>
        <ol>
          <li>DJ</li>
          <li>Hanzel</li>
          <ol>
            <li>Five levels should be enough</li>
            <li>Right?</li>
          </ol>
        </ol>
      </ol>
  </ol>
  <li>But don't forget this</li>
</ol>

<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
```