HTML Lists

Lists are basic text structures. While simple in concept, lists can be very powerful in execution. There are three types of lists: unordered lists, ordered lists, and definition lists

Unordered list

The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is a list of items, each one preceded by a "bullet" (small black circle).

The unordered list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item."

<LI> has a corresponding </LI>, but this closing tag is not required to end the list item. Although you could use one if you really wanted to. You can use as many list items as you like, up to your browser's built-in maximum, if any.

Here's the markup for a simple list:


Output of the above unordered list

Almost anything can be put into a list item like line breaks, entire paragraphs, images, links, or even other lists. For example:


Output of the above unordered list :

Ordered list

On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using <UL> and </UL>, an ordered list is contained within the tags <OL> and </OL>. Ordered lists are based on list items, just as unordered lists are.

However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example in this section of the module (Unordered Lists):


The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this:

Output for above ordered list:

Using the start attribute start your ordered list on any number besides 1.


Output for above ordered list starts from 6:

There are 4 other types of ordered lists. You can replace generic numbers with Roman numberals or letters,both capital and lower-case. Use the type attribute to change the numbering.

Ordered list Type 1


Output for above ordered list starts with 'a'
Ordered list Type 2


Output for above ordered list starts with 'A'
Ordered list Type 3


Output for above ordered list starts with 'i':
Ordered list Type 4


Output for above ordered list starts with 'I'
Definition List

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

A simple definition list example shown below


Output of the above definition list