Order List HTML

In this tutorial you will learn how to create different types of lists in HTML.

Working with HTML Lists

HTML lists are used to present list of information in well formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning.

• Unordered list — Used to create a list of related items, in no particular order.
• Ordered list — Used to create a list of related items, in a specific order.
• Description list — Used to create a list of terms and their descriptions.

Note: Inside a list item you can put text, images, links, line breaks, etc. You can also place an entire list inside a list item to create the nested list.

In the following sections we will cover all the three types of list one by one:

HTML Unordered Lists

An unordered list created using the <ul> element, and each list item starts with the <li> element.

The list items in unordered lists are marked with bullets. Here's an example:

<ul> <li>Chocolate Cake</li> <li>Black Forest Cake</li> <li>Pineapple Cake</li> </ul>

— The output of the above example will look something like this:

• Chocolate Cake
• Black Forest Cake
• Pineapple Cake

You can also change the bullet type in your unordered list using the CSS list-style-type property. The following style rule changes the type of bullet from the default disc to square:

ul { list-style-type: square; }

Please check out the tutorial on CSS lists to learn about styling HTML lists in details.

HTML Ordered Lists

An ordered list created using the <ol> element, and each list item starts with the <li> element. Ordered lists are used when the order of the list's items is important.

The list items in an ordered list are marked with numbers. Here's an example:

<ol> <li>Fasten your seatbelt</li> <li>Starts the car's engine</li> <li>Look around and go</li> </ol>

— The output of the above example will look something like this:

1. Fasten your seatbelt
2. Starts the car's engine
3. Look around and go

The numbering of items in an ordered list typically starts with 1. However, if you want to change that you can use the start attribute, as shown in the following example:

<ol start="10"> <li>Mix ingredients</li> <li>Bake in oven for an hour</li> <li>Allow to stand for ten minutes</li> </ol>

— The output of the above example will look something like this:

1. Mix ingredients
2. Bake in oven for an hour
3. Allow to stand for ten minutes

Like unordered list, you can also use the CSS list-style-type property to change the numbering type in an ordered list. The following style rule changes the marker type to roman numbers.

ol { list-style-type: upper-roman; }

Tip: You can also use the type attribute to change the numbering type e.g. type="I". However, you should avoid this attribute, use the CSS list-style-type property instead.

HTML Description Lists

A description list is a list of items with a description or definition of each item.

The description list is created using <dl> element. The <dl> element is used in conjunction with the <dt> element which specify a term, and the <dd> element which specify the term's definition.

Browsers usually render the definition lists by placing the terms and definitions in separate lines, where the term's definitions are slightly indented. Here's an example:

<dl> <dt>Bread</dt> <dd>A baked food made of flour.</dd> <dt>Coffee</dt> <dd>A drink made from roasted coffee beans.</dd> </dl>

— The output of the above example will look something like this:

Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list: Numeric Number (1, 2, 3) Capital Roman Number (I II III) Small Romal Number (i ii iii) Capital Alphabet (A B C) Small Alphabet (a b c) To represent different ordered lists, there are 5 types of attributes in <ol> tag. Type Description Type "1" This is the default type. In this type, the list items are numbered with numbers. Type "I" In this type, the list items are numbered with upper case roman numbers. Type "i" In this type, the list items are numbered with lower case roman numbers. Type "A" In this type, the list items are numbered with upper case letters. Type "a" In this type, the list items are numbered with lower case letters. HTML Ordered List Example Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type. <ol> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: ol type="I" Let's see the example to display list in roman number uppercase. <ol type="I"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: ol type="i" Let's see the example to display list in roman number lowercase. <ol type="i"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: ol type="A" Let's see the example to display list in alphabet uppercase. <ol type="A"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: ol type="a" Let's see the example to display list in alphabet lowercase. <ol type="a"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: start attribute The start attribute is used with ol tag to specify from where to start the list items. <ol type="1" start="5"> : It will show numeric values starting with "5". <ol type="A" start="5"> : It will show capital alphabets starting with "E". <ol type="a" start="5"> : It will show lower case alphabets starting with "e". <ol type="I" start="5"> : It will show Roman upper case value starting with "V". <ol type="i" start="5"> : It will show Roman lower case value starting with "v". <ol type="i" start="5"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: reversed Attribute: This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1). Example: <ol reversed> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ol> Test it Now Output: Supporting Browsers Element Chrome IE Firefox Opera Safari <ol> Yes Yes Yes Yes Yes Next TopicHTML Unordered List

• Send your Feedback to [email protected]