Create HTML Bullet Points – Instructions
How to Create HTML Bullet Points: Video
This video lesson, titled “Bulleted (Unordered) Lists,” shows you how to create HTML bullet points, also called unordered lists in HTML. This video lesson is from our introductory HTML5 and CSS3 tutorial, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”
Overview of How to Create Ordered Lists in HTML
You can create HTML bullet points by making an unordered list in HTML. An unordered list in HTML, also called a bullet list in HTML, is a common type of HTML list. The other most popular choice is probably the ordered list. Unlike an ordered list, you use bullet lists in HTML to list items you don’t need to list in order.
To create HTML bullet points in an unordered list in HTML, you must use two different tags. First, place the <ul>…</ul> tags around the text to turn into a bulleted list. Second, place the <li>…</li> tags around each line item in the list. You can choose from three formatting type choices when making HTML bullet points. You can create either circles, squares, or discs. The default is discs. To set the type of bullets, use the STYLE attribute. Then set its value as “list-style-type:format” where format is the word circle, square or disc. You add the STYLE attribute within the <ul> start tag.
Start Tag: | <ul> | |
End Tag: | </ul> | |
Attributes: | style=“list-style-type:disc” | Bullet style is filled circle |
style=“list-style-type:circle” | Bullet style is hollow circle | |
style=“list-style-type:square” | Bullet style is filled square | |
Related Tags: | <li>…</li> (Line item) | |
Example: | My list:<ul style=“list-style-type:square”>
<li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul> |
This tag makes the items surrounded by the line item tags <li>…</li> appear as a list with square bullets. |
Result: | My List:
|
A picture of a user creating HTML bullet points in a simple web page created in Notepad.
Instructions on How to Make HTML Bullet Points
- To create HTML bullet points, type the first part of the start tag at the point in the web page at which to add the unordered list (Exclude the trailing periods at the ends of these sentences.): <ul style=“list-style-type:.
- Then type the value for the type of bullets with closing quotes: disc” or circle” or square”.
- Then close the tag by typing the closing tag character: >.
- Press the “Enter” key on your keyboard.
- Type <li>.
- Type the text for the first item in your list.
- Type </li>.
- Repeat steps 4 through 7 for each additional line item to add.
- When done, press the “Enter” key on your keyboard.
- Type </ul>.