How to Make a list in HTML[Number & Bullet Lists]

You can create lists of one or more related items in HTML.

HTML has a set of tags that allows you to create different types of lists.

You can make bullet lists, number lists, lists within other lists, and description lists.

Bullet list HTML

You can create a bullet point list using the unordered list(ul) HTML tags. Each individual list item is enclosed by the list item(li) HTML tags.

Example

<p>Countries in Africa</p>
<ul>
  <li>Kenya</li>
  <li>Nigeria</li>
  <li>South Africa</li>
  <li>Egypt</li>
</ul>

Results

html list

Numbered List HTML

To create a numbered list, you use the ordered list(ol) HTML tags. Then, each individual list item is surrounded by the list item (li) HTML tags.

Example

<p>Top 4 most consumed drinks in the world</p> 
<ol>
  <li>Water</li>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Orange Juice</li>
</ol>

Results

html list

Nested List HTML

A nested list is a list that appears within another list. You can make a nested bullet list, nested number list or a mixed nested list.

- Nested Numbered List

Example

<p>Top most used metals</p>
<ol>
  <li>Top Uses of Steel
    <ol>
      <li>Construction</li>
      <li>Transportation</li>
    </ol>
  </li>
  <li>Top uses of Aluminum
    <ol>
      <li>Power lines</li>
      <li>Construction</li>
      <li>Electronics
    </ol>
  </li>
  <li>Zinc</li>
</ol>

Results

html list

- Nested Bulleted List

Example

<p>List of hobbies</p>
<ul>
  <li>Indoor Hobbies
    <ul>
      <li>Yoga</li>
      <li>Woodwork</li>
    </ul>
  </li>
  <li>Outdoor Hobbies
    <ul>
      <li>Hunting</li>
      <li>Camping</li>
    </ul>
  </li>
</ul>

Results

html list

- Nested Mixed List

Numbered list nested in bullet list

Example

<p>Olympic Games</p>
<ul>
  <li>Best Players in Tennis
    <ol>
      <li>Novak Djokovic</li>
      <li>Daniil Medvedev</li>
    </ol>
  </li>
  <li>Best Runners in Marathon
    <ol>
      <li>Eliud Kipchoge</li>
      <li>Kenenisa Bekele</li>
    </ol>
  </li>
</ul>

Results

html list

Bullet list nested in numbered list

Example


<ol>Top Fruits in the world
  <li>Countries that grow Tomatoes
    <ul>
      <li>China</li>
      <li>India</li>
      <li>Turkey</li>
    </ul>
  </li>
  <li>Countries that grow Bananas
    <ul>
      <li>Indonesia</li>
      <li>Brazil</li>
      <li>Angola</li>
    </ul>
  </li>
</ol>

Results

html list

Note: The nested list should appear inside one of the list items in the parent list.