HTML lists allow web developers to group a set of related items in lists.

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<!-- Unordered Lists -->
<ul>
  <li>
    Courses
    <ul>
      <li>HTML</li>
      <li>JavaScript</li>
      <li>Git</li>
    </ul>
  </li>
  <li>School</li>
  <li>Major</li>
  <li>Contact me</li>
</ul>

Output:

• Courses
  • HTML
  • JavaScript
  • Git
• School
• Major
• Contact me

Tips: type ul>li*3 to quickly generate an unordered list with 3 list items.

Note: You can customize your bullet points, like so:

<style>
  ul {
    /* make bullet points squared */
    list-style-type: square;
  }
</style>

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<!-- Ordered Lists -->
<ol>
  <li>Preheat the oven.</li>
  <li>Place the ingrident on the crust.</li>
  <li>Put the pizza in the oven for 20 mins</li>
</ol>

Output:

1. Preheat the oven.
2. Place the ingrident on the crust.