HTML Lists

Lists are everywhere on the web — navigation menus, ingredient lists, top 10 rankings, FAQs, and more. HTML provides three types of lists to organize information.

Unordered Lists: <ul> and <li>

An unordered list displays items with bullet points. Use it when the order of items does not matter.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

The <ul> element wraps the entire list, and each item is wrapped in <li> (list item).

Attributes

Unordered lists support the type attribute, though it is deprecated in HTML5 in favor of CSS:

• type="disc" — default filled circle
• type="circle" — hollow circle
• type="square" — square bullet

In modern HTML, use the CSS list-style-type property instead.

Ordered Lists: <ol> and <li>

An ordered list displays items with numbers or letters. Use it when sequence matters, such as step-by-step instructions.

<ol>
  <li>Preheat the oven to 350&deg;F.</li>
  <li>Mix the dry ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Attributes

• type — numbering style: "1" (numbers, default), "A" (uppercase letters), "a" (lowercase letters), "I" (uppercase Roman), "i" (lowercase Roman)
• start — starting number (e.g., start="5")
• reversed — reverses the order (descending numbers)

<ol type="I" start="3">
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

Nested Lists

Lists can be nested inside other list items to create sub-lists. Simply place a new <ul> or <ol> inside an <li>:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Nested lists are automatically indented by browsers, creating a clear visual hierarchy.

Definition Lists: <dl>, <dt>, <dd>

A definition list groups terms and their descriptions, similar to a dictionary:

• <dl> — the definition list container
• <dt> — the term being defined
• <dd> — the definition / description

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the standard language for web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — used to style HTML content.</dd>
</dl>

A single <dt> can have multiple <dd> elements, and multiple <dt> elements can share a single <dd>.

Styling Lists with CSS

While HTML provides basic list attributes, modern CSS offers powerful list styling:

ul {
  list-style-type: square;
  padding-left: 20px;
}
 
ol {
  list-style-type: lower-roman;
}
 
li {
  margin-bottom: 5px;
}

You can also use list-style-image for custom bullet icons, or remove bullets entirely with list-style: none.