HTML Lists

HTML lists group related items together. There are three kinds: unordered lists (<ul>) for bullet points, ordered lists (<ol>) for numbered steps, and description lists (<dl>) for terms and definitions.

Unordered and Ordered Lists

Each item in a <ul> or <ol> goes inside an <li> element.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Lists</title></head>
<body>
  <h3>Packing list</h3>
  <ul>
    <li>Passport</li>
    <li>Charger</li>
    <li>Sunglasses</li>
  </ul>
  <h3>Making tea</h3>
  <ol>
    <li>Boil water</li>
    <li>Add tea leaves</li>
    <li>Steep for three minutes</li>
  </ol>
</body>
</html>

Ordered List Attributes

type changes the marker (1, A, a, I, i), start sets the first number, and reversed counts down.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ol attributes</title></head>
<body>
  <ol type="A"><li>Option</li><li>Option</li></ol>
  <ol start="5"><li>Fifth</li><li>Sixth</li></ol>
  <ol reversed><li>Three</li><li>Two</li><li>One</li></ol>
</body>
</html>

Nested Lists

Put a whole new list inside an <li> to create sub-items.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Nested</title></head>
<body>
  <ul>
    <li>Frontend
      <ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
    </li>
    <li>Backend
      <ul><li>PHP</li><li>Node.js</li></ul>
    </li>
  </ul>
</body>
</html>

Description Lists

<dl> holds pairs of <dt> (term) and <dd> (description). It suits glossaries and key-value data.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>dl</title></head>
<body>
  <dl>
    <dt>HTML</dt><dd>Structures web content.</dd>
    <dt>CSS</dt><dd>Styles web content.</dd>
  </dl>
</body>
</html>

Lists for Navigation

Navigation menus are usually built as a <ul> of links inside a <nav> element, then styled horizontally with CSS. Use the CSS list-style property to remove or change bullets.

Frequently asked questions

How do I remove bullets from a list in HTML?

Use CSS: ul { list-style: none; padding-left: 0; }.

What is the difference between ul and ol?

<ul> is for items where order does not matter and shows bullets. <ol> is for sequences where order matters and shows numbers or letters.

Can a list item contain other elements?

Yes. An <li> can contain paragraphs, links, images and even other lists.