HTML List

HTML Lists: Organizing Content with Ordered, Unordered and Description Lists

Lists help present information in a structured, easy-to-digest format. HTML offers three main types of lists.

1. Unordered Lists (Bullet Points)

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Nested Unordered List

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

2. Ordered Lists (Numbered)

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Ordered List Types

<ol type="1">   <!-- Numbers (default) -->
<ol type="A">   <!-- Uppercase letters -->
<ol type="a">   <!-- Lowercase letters -->
<ol type="I">   <!-- Uppercase Roman numerals -->
<ol type="i">   <!-- Lowercase Roman numerals -->

3. Description Lists (Name-Value Pairs)

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

4. Practical List Examples

Navigation Menu

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

Recipe Steps

<h3>Chocolate Chip Cookies</h3>
<ol>
  <li>Preheat oven to 375°F (190°C)</li>
  <li>Mix flour, baking soda and salt</li>
  <li>Beat butter and sugars until fluffy</li>
</ol>

Lists are versatile elements that can be styled in countless ways with CSS to fit your design needs!