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

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 tutorial. For more information on this course please visit Website Design Basics

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!