---
title: "Bullet Points and Numbered Lists Explained"
description: "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..."
url: https://www.inmotionhosting.com/support/website/bullet-points-numbered-lists/
date: 2011-09-01
modified: 2025-06-12
author: "Brad Markle"
categories: ["Website"]
type: post
lang: en
---

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

**Professional Websites Without the Tech Headaches**

Our team will build a beautiful WordPress site and take care of updates, security, and maintenance – so you can focus on running your business.

[Let Us Handle It for You](https://www.inmotionhosting.com/services?mktgp=t&irgwc=1&affiliates=5001860&utm_campaign=Jumbotron&utm_source=supportcenter&utm_medium=cta&utm_term=pro-websites-cta3)

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

| Ordered CSS properties |
| --- |
| lower-alpha |
| lower-roman |
| lower-latin |
| lower-greek |
| upper-alpha |
| upper-roman |
| upper-latin |
| upper-greek |

| CSS property to hide the list style |
| --- |
| none |
| Unordered CSS properties |
| disc |
| square |
| circle |

If you missed our previous article, please see the [Basic Style using the Tag](/support/edu/joomla/joomla-3/link-parent/) tutorial. For more information on this course please visit [Website Design Basics](/support/edu/joomla/joomla-3/install-joomla-template/)