How do I create a bullet and number list in HTML?

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

<ul>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ul>

The above example would create a bulleted list as shown below.

  • Example
  • Example2
  • Example3

If you wanted to change this list to an ordered list (numbered list), change the <ul></ul> tags to <ol></ol>, as shown in the example below.

<ol>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ol>

The above example would create a numbered list as shown below.

  1. Example
  2. Example2
  3. Example3

If you wanted to apply CSS style or use an image as your bullet list, create CSS code similar to the example below.

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

In this example, using 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, you can remove the #content in the above example. 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 padding and indent around the bullets. Finally, the last background line tells the browser to use an image as the bullet and where to display it. With this CSS code, we get bullets as shown below.

  • Example
  • Example2
  • Example3

Additional information