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.

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

1. 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:.
2. Then type the value for the type of bullets with closing quotes: disc” or circle” or square”.
3. Then close the tag by typing the closing tag character: >.
4. Press the “Enter” key on your keyboard.
5. Type <li>.
6. Type the text for the first item in your list.
7. Type </li>.
8. Repeat steps 4 through 7 for each additional line item to add.
9. When done, press the “Enter” key on your keyboard.
10. Type </ul>.