How do I create a bullet and number list in HTML?
Question
How do I create a bullet and number list in HTML?
Answer
To create a bulleted list use the <ul><li></li></ul> tags and shown in the below example.
<ul>
<li>Example</li>
<li>Example2</li>gt;
<li>Example3</li>
</ul>
The above example would create a bulleted list as shown in the below example.
- 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 below example.
<ol>
<li>Example</li>
<li>Example2</li>
<li>Example3</li>
</ol>
The above example would create a numbered list as shown in the below example.
- Example
- Example2
- Example3
If you wanted to apply CSS style or use an image as your bullet list create CSS code similar to the below example.
#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 definition for full information on bullets and related links.