How to create a bullet and number list in HTML

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

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.

4. Example 4
5. Example 5
6. 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