How to Create Lists in HTML?

List is one of the most useful HTML element as you can express content easily with bulleted lists. Instead of writing lengthy content, it makes sense to write bullet lists or use tables to fir long content in a smaller space. In this HTML list tutorial, we will explain how to create and use lists on your webpage.

Listless Content

Assume you want to display your resume on your webpage listing all your skills, how would you create your page? The HTML source code of your page will look something like below:

<H1>My resume</H1>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
Cutting apples<BR>
Making paper aeroplanes<BR>
Turning chairs upside down<BR>
Walking backwards<BR>
Folding newspapers<P>
Please consider me for any vacancy that you deem fit.<P>
Sincerely yours, <BR>
I M Dumb.

And the page looks like this:

HTML Lists

Most of the time it is necessary to list down all your items in a webpage and it is no more a difficult task with HTML list tags. For example, in the above example you can display all your skills with bulleted list using list tag. You can create three types of lists in HTML.

<UL> – Unordered or Unnumbered list
<OL> – Ordered or Numbered list
<DL> – Definition or description list

Each item in the list is to be separated with <LI>Item</LI> tags. We will discuss each of these lists in the following section with examples.

Unordered or Unnumbered Lists

Let us look at a simple HTML list structure and understand each element.

<H1>My resume</H1>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
<UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</UL>
Please consider me for any vacancy that you deem fit.<P>
Sincerely yours, <BR>
I M Dumb.

So how does that look?

<UL> List Attributes

The default style of the bullet is a disc style, but you can customize it by using the “type” attribute like <UL type=”circle”>. The acceptable values of the “type” attribute are “square”, “disc” and “circle”.

Ordered or Numbered lists

Suppose you want to have some kind of numbers in the list as below?

Cutting apples
Making paper aeroplanes
Turning chairs upside down
Walking backwards
Folding newspapers

Ordered list <OL> tag is used to create a numbered list in HTML and you can replace the <UL>…</UL> tags with <OL>…</OL> tags to create a numbered list.

<OL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</OL>

<OL> List Attributes

By default numbers 1, 2, 3… are used in an ordered list, what if you want to use small Roman numerals or alphabets instead of numbers? Simple! Similar to <UL> tag, <OL> tag can also have an attribute called “type” to customize the numbers. The value of “type” attribute can be “I”, ”i”, ”A” or “a” and the syntax is:

Below is the table showing various values of the “type” attribute for an ordered list:

Definition or Description Lists

This list has a series of terms and their definitions. The definition is usually displayed on a new line with indentation. See the below example to know how it works:

Both ordered and unordered lists can be used with definition list. In the above example, the first list item is used with ordered list and the second item is used with unordered list. The code for the example is given below.

<DL>
<DT>Optimist
<DD><ul><li>A person who thinks a gloomy rainy day is a good chance to show off his umbrella</li></ul>
<DT>Pessimist
<DD><ul><li>A person who sees the sun shining brightly and thinks how hot and uncomfortable it is</li></ul>
</DL>

A definition list contains two more tags in addition to tag.

<DT> – This is the Term
<DD> – This is the Term Definition

Nested Lists

All three HTML list tags <UL>, <OL> and <DL> can be used in a nested manner according to your requirement. Below is an example of nesting two ordered and unordered lists:

<UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<UL>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
</UL>
<LI>Folding newspapers</LI>
</UL>

And the result on the browser should be like below: