Bullet Points and Numbered Lists Explained

HTML has code you can use that allows you to make a “bulleted” or “numbered” list. There are two different types of list tags. The <ol> (ordered list) and <ul> (unordered list). Ordered lists are lists that order items by numbers or roman numerals. Unordered lists are bulleted points that can have circles or squares instead of numbers. Each ordered and unordered list has <li> elements within it. The <li> tags display each list item.

Code for the Ordered list

First, let’s discuss “Ordered Lists“. Ordered lists will be numbered and we will start with the <ol> tag.

<ol></ol>

This is the opening tag to tell the web browser the following content is to be contained in an ordered list. Now, we will need to add an <li> tag which stands for list item. After adding the list item tags and closing them our code will look like this. Don’t forget to close the tags.

<ol>   <li>first line in the list </li>   <li>second line in the list </li> </ol>

The above code will display the following results:

1. first line in the list
2. second line in the list

Code for the Unordered list

The process is the same for the unordered list. The only difference is the opening and closing tag of the actual list. Don’t forget to close your tags or the lists will not display correctly. 

<ul>   <li>first line in the list </li>   <li>second line in the list </li> </ul>

The above code will display the following results:

• first line in the list
• second line in the list

list styles in ordered and unordered lists

There are different style properties you can use for your lists. You can make the list style disc, square, circle etc.

<ul style="list-style: square">   <li>first line in the list </li>   <li>second line in the list </li> </ul>

The above code will display the unordered list with squares:

• first line in the list
• second line in the list

The ordered list can have alpha, roman or other numeric style lists. The following in how the code works.

<ol style="list-style: upper-roman">   <li>first line in the list </li>   <li>second line in the list </li> </ol>

The above code will display the ordered list with Upper case Roman numerals:

1. first line in the list
2. second line in the list

List of CSS list-style properties

If you missed our previous article, please see the Basic Style using the Tag tutorial. For more information on this course please visit Website Design Basics