List in HTML

Lists provide the information in a structured and easy to read format. The data item on the webpage can catalogued or indexed. The index that is formed using numbers like 1,2,3,…or symbols like →, b, ∞ is called a List in HTML. These lists help in formatting the data and put them in a particular order. There are three types of lists that you can use in HTML. They are:

UL - creates an unordered or bulleted list
OL - creates an ordered or numbered list
DL - creates a definition or glossary list

The first two are very similar in structure, while definition lists have a unique setup. To create either kind, first specify the start of a list and then identify each line item in the list

1. Unordered List <ul> ….</ul>

It classifies the data items that have equal importance i.e. none of the data items are ranked. They are identified by a symbol. It may be a □ square, a ○ circle or a ● disc. The attribute TYPE helps in using the symbols to create a list. This attribute takes the value as the name of the symbol.

<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>

This is a container tag. It has both the opening and the closing tag. However the closing tag is optional. The listing is created under it using the <li> tag. Again <li> tag is a container tag. The data item to be listed is input between the opening <li> and the closing </li> tag as shown in the following example:

<body>
	<ul>
		<li>apples </li>
		<li>oranges</li>
		<li>guava </li>
	</ul>
</body>

2. Ordered Lists <ol> … </ol>

It classifies the data items that do not have equal importance. All the data items are ranked. The ranking can be done using the numbers, the roman letter or alphabets. The default symbol is number. In case you want to change to other symbols of ordered list, you can use the attribute. The attributes used with this tag are given in the table below:

Attributes of <ol> tag	Description
TYPE	Changes the symbol used with the list. It takes the value as the symbol itself i.e. it can be “a” or “A” or “I” or “i” or “1”.
START	Begins the list with value specified. It takes the value of the symbol from where to begin the list

Example:

<body>
	<ol>
		<li>Get up in the morning</li>
		<li>Brush your teeth</li>
		<li>Take the bath</li>
		<li>Eat the breakfast</li>
		<li>Get ready to go to school</li>
	</ol>
</body>

3 Definition Term Lists <dl> …. </dl>

Definition lists (<dl>) are the list elements that have an array of tags. The list prepared by <dl> tag is similar to a dictionary. The other tags used with this are <dt> to define the definition term and the <dd> for the definition of the list item.

Example:

<dl>
	<dt>clairvoyance</dt>
	<dd>French word for ability to see events in the future.</dd>
	<dt><b>Esprit de corps</b></dt>
	<dd>French word for feeling of pride and loyalty.</dd>
	</dt>
</dl>