What is bullets and numbering in HTML?

Updated: 08/02/2020 by

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, there are two types of lists: bulleted and numbered. The following sections shows 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

Example code

Example 1
Example 2
Example 3

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

Example result

• Example
• Example2
• Example3

Tip

You can also use the extended HTML code • if you want 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

Example code

Example 1
Example 2
Example 3

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

Example 1
Example 2
Example 3

Paragraph example.

Example 4
Example 5
Example 6

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

You can also put lists inside of one another, creating a sublist. This technique, called nesting, can be accomplished by starting a list after one of the list item (

Example 1
Example 2
Example 3


Bullet 1
Bullet 2
Bullet 3

Example 4
Example 5
Example 6

#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;
}