<ul> / <ol> / <li>

The ul element creates an unordered (bulleted) list, ol creates an ordered (numbered) list, and each item in either list is written using the li element.

Syntax

<!-- Unordered list (no sequence) -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list (with sequence) -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

Attributes

Tag / Attribute	Description
ul	Creates an unordered list. Each item is preceded by a bullet (●) by default.
ol	Creates an ordered list. Each item is preceded by a sequential number by default.
li	Represents each item in a list. Must be used as a direct child of `ul` or `ol`.
ol[type]	Specifies the numbering style. Accepted values are `1` (numbers), `a` (lowercase letters), `A` (uppercase letters), `i` (lowercase Roman numerals), and `I` (uppercase Roman numerals).
ol[start]	Specifies the starting number for the list. For example, `start="3"` begins the list at 3.
ol[reversed]	Reverses the numbering order (descending). No value is required.
li[value]	Overrides the number for a specific `li` inside an `ol`.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- Unordered list -->
  <h2>Favorite Foods</h2>
  <ul>
    <li>Ramen</li>
    <li>Curry</li>
    <li>Sushi</li>
  </ul>

  <!-- Ordered list starting at 3 -->
  <h2>Setup Steps (continued)</h2>
  <ol start="3">
    <li>Save the file</li>
    <li>Check in the browser</li>
    <li>Fix and repeat</li>
  </ol>

  <!-- Nested lists -->
  <h2>Programming Languages</h2>
  <ul>
    <li>Front-end
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Back-end
      <ul>
        <li>PHP</li>
        <li>Python</li>
      </ul>
    </li>
  </ul>

</body>
</html>

Output

ul items are displayed with bullets, and ol items are displayed with sequential numbers. Nested lists are indented beneath their parent item.

Favorite Foods
  ● Ramen
  ● Curry
  ● Sushi

Setup Steps (continued)
  3. Save the file
  4. Check in the browser
  5. Fix and repeat

Programming Languages
  ● Front-end
      ○ HTML
      ○ CSS
      ○ JavaScript
  ● Back-end
      ○ PHP
      ○ Python

Notes

Both ul and ol represent lists, but they carry different meanings. Use ul when the order does not matter (e.g., a list of favorite foods), and ol when the order is significant (e.g., steps or rankings). Choosing the right element produces a more semantically correct document structure.

Lists can be nested inside one another. When nesting, write the text directly inside the li element first, then place the child list after it — this is the correct structure. Placing elements other than li as direct children of ul or ol is invalid HTML.

List markers (bullets and numbers) can be freely customized with CSS. The list-style-type property changes the marker style, and list-style: none hides it entirely. Navigation menus are often built with ul and li, typically with markers hidden via CSS.