Tutorial India

Lists in HTML

Lists are one of the important HTML markups. In our daily life we often come across lists. In HTML we have several ways to markup a typical lists. The lists are of two types in HTML. Namely

1. The Ordered List <ol> </ol>
2. The Unordered List <ul> </ul>

The start and end tags are mentioned against each type of list. You might have noticed the list on the home page of the http://www.tutorialindia.com. The syntax to display a list depends on the type of the list we want to display. The items of a list are written as “<li> item </li>”. Now, Difference between an order list (OL) and unordered list (UL) is the way they are displayed by the browser. You will understand everything when you see the examples below. Example of an ordered list.
Code
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

Output

1. item1
2. item2
3. item3

Example of an undordered list.

Code
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

Output

• item1
• item2
• item3

Did you notice the difference? Yes, the browser shows the count of a list item in an ordered list while no such count is displayed for the unordered list. It just shows a circle in the place of count.

We can change both the default count style (1, 2, or 3) and the display style (circle) by specifying the list-style of the <ol> or <ul> elements.

The syntax to do so is Like this.
Code
<ol type=A>
<li>item1</li>
<li>item2</li>
<li>item2</li>
</ol>

Output

1. item1
2. item2
3. item2

Code
<ul type=square>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

Output

• item1
• item2
• item3

These attributes and several other attributes of HTML lists are now-a-days controlled by css.

We have covered almost all the major HTML topics. Only two major topics “Tables in HTML” and “Forms in HTML” are left now. Let us reduce this by one and start learning HTML Tables!