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

To create a bulleted list use the <ul><li></li></ul> tags and shown in the example below. To help remember these tags, "ul" is short for "unordered list" and "li" is short for "list item."

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

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

  • Example
  • Example2
  • Example3

If you wanted to change this list to a 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 in the example 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, from 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. Next, the padding: 0 0 4px 23px; is the padding and indent around the bullets. Finally, the last background line tells the browser to use a image as the bullet and where to display it. With this CSS code we get bullets as shown below.

  • Example
  • Example2
  • Example3

Additional information

  • See the bullet and UL definition for full information on bullets and related links.