Runnable HTML Docs: Lists

Q: How do you make bullet points in HTML?

Use an unordered list: with one per bullet, for example Milk Eggs . The browser draws a bullet before each item and indents the list.

Q: How do I remove the bullets from a list in HTML?

Set list-style: none on the in CSS. Also set padding-inline-start: 0 (or padding: 0) to remove the indentation the browser adds for the bullets.

Q: How do I start an ordered list at a different number?

Use the start attribute: numbers the first item 5. reversed counts down instead, and value on an sets the number of that item and the ones after it.

Q: How do you make a nested list in HTML?

Put the inner or inside an of the outer list, after that item's text. A list placed directly inside another , between elements, is invalid.

HTML lists: ul, ol and li

HTML has two main lists. <ul> (unordered list) shows bullet points, and <ol> (ordered list) shows numbers. Each item is an <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Use <ol> when the order means something (steps, rankings, a table of contents) and <ul> when it does not. Screen readers announce both as lists with a count, such as "list, 3 items", which is why a real list is better than lines that start with a typed "•" or "1.".

A list can only contain <li> elements directly. Anything else, including headings, paragraphs and other lists, goes inside an <li>.

Bullet point styles

list-style-type on the <ul> changes the bullet. The ::marker pseudo-element styles the bullet or number itself, separately from the text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

A string value uses that text as the bullet. "\2713 " is a check mark followed by one space: the first space only ends the \2713 escape. ::marker accepts only a few properties, mainly color, font-size and other font properties, which covers the common "colored bullets" request without extra markup.

Ordered lists: numbers, letters and Roman numerals

<ol> has attributes for its numbering:

Attribute	Example	Result
`type`	`type="a"`	a, b, c (`A`, `i`, `I` and `1` also work)
`start`	`start="5"`	Starts counting at 5
`reversed`	`reversed`	Counts down
`value` (on `<li>`)	`<li value="10">`	This item is 10, the next ones continue from there

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type is fine in HTML because the letters can carry meaning ("choose option B"). For purely visual changes, CSS list-style-type: upper-alpha or lower-roman does the same.

Nested lists

A sub-list goes inside the <li> it belongs to, after that item's text. Browsers change the bullet at each level: disc, then circle, then square.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Note where </li> goes: the "Frontend" item closes only after its sub-list. Closing it before the <ul> puts the sub-list directly inside the outer <ul>, which is invalid even though it looks almost the same.

Ordered lists nest the same way, and the numbering restarts at 1 in each sub-list. For numbers like 1.1 and 1.2, CSS counters are needed.

Description lists: dl, dt and dd

A description list pairs terms with their descriptions: a glossary, the details of an order, FAQ-like pairs. <dt> is the term and <dd> the description:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

A term can have several <dd>s, and several <dt>s can share one <dd>. Browsers indent <dd> by default; the margin rule above removes it. For data with several columns, a table is the better fit.

Lists without bullets: menus and horizontal lists

Navigation menus are lists of links. Remove the bullets with list-style: none and the indent with padding: 0, then lay the items out in a row with flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

The list is still a list for screen readers ("navigation, list, 3 items"). One exception: Safari with VoiceOver can drop the list meaning when the bullets are removed. If the count matters to your users, add role="list" to the <ul>.

Default spacing

Browsers give lists a top and bottom margin of 1em and indent them with padding-inline-start: 40px, which is where the bullets sit. The padding is on the start side, so in right-to-left languages the bullets and indentation move to the other side automatically. Remove the padding and the bullets move outside the list box, where they can be cut off; either keep some padding or use list-style-position: inside.

Common mistakes

<li> without a parent list. It must be inside <ul>, <ol> or <menu>.
A nested list outside its <li>. Put the sub-list inside the item it belongs to.
Text or other tags directly inside <ul>, such as <ul><p>Note</p><li>...</li></ul>. Move them into an <li> or out of the list.
Typing bullets or numbers by hand with • and <br>. Screen readers hear a paragraph, not a list.
list-style: none without padding: 0, leaving a mysterious 40-pixel indent.
Using <ol> for the look. If the order does not matter, use <ul> and style it.

Frequently Asked Questions

How do you make bullet points in HTML?

Use an unordered list: <ul> with one <li> per bullet, for example <ul><li>Milk</li><li>Eggs</li></ul>. The browser draws a bullet before each item and indents the list.

What is the difference between ul and ol?

<ul> is an unordered list, shown with bullets, for items whose order does not matter. <ol> is an ordered list, shown with numbers, for steps and rankings where order does matter. Both hold <li> items.

How do I remove the bullets from a list in HTML?

Set list-style: none on the <ul> in CSS. Also set padding-inline-start: 0 (or padding: 0) to remove the indentation the browser adds for the bullets.

How do I start an ordered list at a different number?

Use the start attribute: <ol start="5"> numbers the first item 5. reversed counts down instead, and value on an <li> sets the number of that item and the ones after it.

How do you make a nested list in HTML?

Put the inner <ul> or <ol> inside an <li> of the outer list, after that item's text. A list placed directly inside another <ul>, between <li> elements, is invalid.

Related concepts