<ul> / <ol> / <li>

Since:		HTML 4（1997）

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

sample_ul_ol_li.html

<!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.

View sample page

list-style-type Values

The CSS list-style-type property changes the marker style of list items.

Value	Example	Description
disc	● filled circle	Default for `ul`.
circle	○ open circle	Hollow circle marker.
square	■ filled square	Filled square marker.
none	(none)	Hides the marker. Commonly used for navigation menus.
decimal	1. 2. 3.	Default for `ol`. Arabic numerals.
decimal-leading-zero	01. 02. 03.	Zero-padded Arabic numerals.
lower-alpha	a. b. c.	Lowercase letters.
upper-alpha	A. B. C.	Uppercase letters.
lower-roman	i. ii. iii.	Lowercase Roman numerals.
upper-roman	I. II. III.	Uppercase Roman numerals.
lower-greek	α. β. γ.	Lowercase Greek letters.

Custom Markers and Navigation Menus with CSS

You can use list-style-image for a custom image marker, or the ::marker pseudo-element to style markers in detail. Building navigation menus from lists is a common pattern.

<style>
  /* Custom emoji markers using ::before */
  ul.emoji-list {
    list-style: none;
    padding-left: 0;
  }
  ul.emoji-list li::before {
    content: "✅ ";
  }

  /* Change marker color and size with ::marker */
  ol.styled-list li::marker {
    color: #4a90e2;
    font-weight: bold;
    font-size: 1.1em;
  }

  /* Horizontal navigation menu */
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
  }
  nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
  }
  nav ul li a:hover {
    border-bottom-color: #4a90e2;
  }
</style>

<ul class="emoji-list">
  <li>Learn HTML basics</li>
  <li>Add styles with CSS</li>
  <li>Add interactivity with JavaScript</li>
</ul>

<!-- Navigation menu built from a list -->
<nav>
  <ul>
    <li><a href="/?lang=en">Home</a></li>
    <li><a href="/tutorial.html?lang=en">Tutorial</a></li>
    <li><a href="/dictionary.html?lang=en">Dictionary</a></li>
  </ul>
</nav>

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.