Episode 11 of 17

Using Lists in HTML

Create ordered lists, unordered lists, and nested lists in HTML. Perfect for navigation menus, feature lists, and instructions.

Lists are everywhere on the web — menus, feature lists, steps, shopping carts. HTML gives you two main list types.

Unordered Lists (Bullets)

Use when order doesn't matter:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered Lists (Numbers)

Use when order matters:

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Write your code</li>
  <li>Preview in browser</li>
</ol>

Nested Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Go</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Navigation Menus with Lists

Most navigation bars are built with lists:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CSS then styles the list items horizontally and removes the bullets to create a modern nav bar.