Lists: Ordered & Unordered

HTML Lists

Lists are one of the most useful elements in HTML. They let you group related content in a structured, readable way. HTML gives you two main types: ordered and unordered.

Unordered Lists

Use <ul> when the order of items doesn't matter — like a grocery list or a list of features. Each item is wrapped in <li>.

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

Ordered Lists

Use <ol> when sequence matters — like steps in a recipe or a ranked list. The browser automatically numbers each <li>.

<ol>
  <li>Open your editor</li>
  <li>Create index.html</li>
  <li>Write your HTML</li>
  <li>Open in browser</li>
</ol>

Nested Lists

You can nest a list inside another <li> to create sub-items. This is great for navigation menus and outlines.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Challenge

In the editor on the right, create an ordered list of the first 5 planets in our solar system, and a nested unordered list under Earth showing its two main properties: atmosphere and water.