Try the HTML5 and CSS3 Course for Free!

Create HTML Bullet Points – Instructions

/ / HTML, Latest
A picture of a user creating HTML bullet points in a simple web page created in Notepad.

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:

  • First Item
  • Second Item
  • Third Item

A picture of a user creating HTML bullet points in a simple web page created in Notepad.

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>.

Video Lesson on Unordered Lists in HTML

         The following 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.”

TOP
Sale! $49 All-Access 1 Days 2 Hours 56 Minutes 46 Seconds      $199 $49 Entire Library!
See Deal