How to create a bullet and number list in HTML

Updated: 08/02/2020 by Computer Hope
HTML and other related languages.

Lists are a great way to organize sections or content on a web page. They make the user experience better by categorizing information, or grouping similar concepts or items. When using HTML (HyperText Markup Language), there are two types of lists: bulleted and numbered. The following sections show you how to create each, and changing their appearance, nesting, and format.

How to create a bulleted list

To create a bulleted list, use the unordered list tags <ul></ul> and list item <li></li> tags as shown in the example below.

Example code

<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

The example above creates a bulleted list, with three bullet points, as shown below.

Example result

  • Example
  • Example2
  • Example3
Tip

Use the extended HTML code &bull; to create a bullet symbol ( • ) without creating an unordered bullet list.

How to create a numbered list

To create a numbered list, use the ordered list tags <ol></ol> and list item <li></li> tags as shown in the example below.

Example code

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>

The example above creates a bulleted list, with three bullet points, as shown below.

Example result

  1. Example 1
  2. Example 2
  3. Example 3

Stopping and continuing a numbered list

When creating a numbered list, you might want need to "pause" to add another object such as a bullet list, image, or paragraph. The following code creates a numbered list that goes from one to three, displays a paragraph, and then continues the numbered list using the start attribute.

Example code

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
<p>Paragraph example.</p> <ol start="4"> <li>Example 4</li> <li>Example 5</li> <li>Example 6</li> </ol>

The start attribute can be any numerical value and tells the ordered list what number to use as the start number.

Example result

  1. Example 1
  2. Example 2
  3. Example 3

Paragraph example.

  1. Example 4
  2. Example 5
  3. Example 6

How to create a bullet list in a number list

Create a sublist by putting lists inside one another. This technique, called nesting, can be accomplished by starting a list after one of the list item (<li>) tags, as shown below.

Example code

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<ul> <li>Bullet 1</li> <li>Bullet 2</li> <li>Bullet 3</li> </ul> <li>Example 4</li> <li>Example 5</li> <li>Example 6</li> </ol>

Example result

  1. Example 1
  2. Example 2
  3. Example 3
    • Bullet1
    • Bullet 2
    • Bullet 3
  4. Example 4
  5. Example 5
  6. Example 6

Applying CSS to a bullet or numbered list

The example below shows how to apply CSS (Cascading Style Sheets) to change the image of the bullets in a list.

Example code

#content ul li {
 list-style-Type: none;
 padding: 0 0 4px 23px;
 background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center;
}

In this example, which uses an external .css file, we're telling the web page to only change the bulleted items in the <div id="content"></div> section. If you want all bulleted items to change, remove the #content in the example above. In the second line, the list-style-Type: none; tells the browser to display no bullets. In the third line, the padding: 0 0 4px 23px; is the space and indent around the bullets. In the fourth line, the background tells the browser to use an image as the bullet and where to display it.

Example result

  • Example 1
  • Example 2
  • Example 3