Using Lists in HTML

🧑‍🏫

NoteArc Instruction

Episode 11 of 17· 1 min read

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.