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. To create a bulleted list, use the unordered list tags How to create a bulleted list
and list item
tags as shown in the example below.
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
- Example 1
- Example 2
- 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
- Example 1
- Example 2
- Example 3
Paragraph example.
- Example 4
- Example 5
- 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 code
- Example 1
- Example 2
- Example 3
- Bullet 1
- Bullet 2
- Bullet 3
- Example 4
- Example 5
- Example 6
Example result
- Example 1
- Example 2
- Example 3
- Bullet1
- Bullet 2
- Bullet 3
- Example 4
- Example 5
- Example 6
Applying CSS to a bullet or numbered list
The example below shows how to apply CSS 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[//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
section. If you want all bulleted items to change, you can 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
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
- Item
- Item
- Item
- Item
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
Try it Yourself »
Unordered HTML List
An unordered list starts with the
tag. Each list item starts with the tag.
The list items will be marked with bullets [small black circles] by default:
Ordered HTML List
An ordered list starts with the
tag. Each list item starts with the tag.
The list items will be marked with numbers by default:
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The tag defines the description list, the
tag defines the term [name], and the
tag describes each term:
Example
Coffee
- black hot drink
Milk
- white cold drink
Try it Yourself »
HTML List Tags
Defines an unordered list | |
Defines an ordered list | |
Defines a list item | |
Defines a description list | |
Defines a term in a description list | |
Describes the term in a description list |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
What are bullets in HTML?
What is bullets and numbering?
What is numbered list in HTML?
- tag defines an ordered list. An ordered list can be numerical or alphabetical.
What is a bulleted list called in HTML?
- HTML element represents an unordered list of items, typically rendered as a bulleted list.