When you want to list several things where the order doesn't matter (like a shopping list or hobbies), you use an unordered list.

The structure of a list

A list always consists of two parts: <ul> ("unordered list", wraps the whole list) and multiple <li> ("list item", each a single entry):

<ul>
  <li>Playing football</li>
  <li>Video games</li>
  <li>Playing outside with friends</li>
</ul>

The browser automatically displays each <li> item with a small dot (a "bullet") in front of it, each on its own line.

The most important rule: only li directly inside ul

Inside <ul>, only <li> elements are allowed directly, nothing else. If you want to highlight text inside a list item, for instance, that <strong> goes inside the <li>, not next to it:

<ul>
  <li><strong>Main sport:</strong> Football</li>
  <li>Secondary sport: Swimming</li>
</ul>

Adding Finn's hobbies to the website

Add a new heading with a list to your website:

<h2>My Hobbies</h2>
<p>Besides football, I enjoy doing other things too:</p>
<ul>
  <li>Riding my bike</li>
  <li>Drawing</li>
  <li>Walking my dog</li>
  <li>Video games with friends</li>
</ul>

Lists inside lists (nesting)

You can even nest an entire list inside a single <li> item, if one item has its own sub-items:

<ul>
  <li>Sports
    <ul>
      <li>Football</li>
      <li>Swimming</li>
    </ul>
  </li>
  <li>Creative
    <ul>
      <li>Drawing</li>
    </ul>
  </li>
</ul>

The browser automatically indents nested lists slightly, so you can see the hierarchy.