List in HTML

While presenting information, the facility of listing can make it more communicative. List are of different types. We are familiar with numbered lists and bulleted lists.  HTML offers several mechanisms for specifying lists of information. All lists must contains one or more list elements. There are three kinds of list in HTML- unordered lists, ordered lists and definition lists.

Unordered list

Unordered lists or bulleted lists display a bullet or other graphic in front of each item in the list. We can created an unordered list with the tag pair <UL>and </UL>. Each item in the list is presented by using the tag pair<LI> and </LI>.
Unordered lists are used when a set of items can be placed in any order.

The code in example presents some hardware components of a computer in bulleted list. The corresponding web page is showing in figure.





We can customise unordered lists by setting the Type attribute to three diffrent values: Disc (default value), Square and Circle, which set the type of bullet that appears before each list item. The following code creates a list as shown in figure.

<UL type="square">
<LI>RAM</LI>
<LI>Hard Disk</LI>
<LI>Mother Board</LI>
<LI>Processor</LI>
</UL>

 

Ordered lists

Ordered lists present the items in same numerical or alphabetical order. HTML provides the tag pair <OL> and </OL>
to create an ordered list. The item in the ordered list are presented by <LI> tag in <OL> element. The ordered list is also called numbered list. Ordered list or numbered lists are used to display list of items that need to be placed in a specific ordered.

Example is a code that presents an ordered list of items. The corresponding web page showing figure.




We can see that the list in figure is numbered from one through four. there are other numbering styles for presenting the list items. We can customise the numbering system used in ordered list by using the Type attribute, which can set with the values as detailed bellow:

1  Default numbering scheme (1,2,3,...)
A  Upper case letter (A,B,C,....)
a  Lower case letters (a,b,c,....)
I   Large roman numerals (I,II,III,...)
i   Small roman numerals (i,ii,iii,...)

An ordered list, by default, starts with the first number in the series used in the list. That is, the starting number will be any one from 1,A,a,I, and i. If we want to start with any other number in the series, then the start attribute of <OL> tag enables us to change the beginning a list at 5, for example, we may write:
<OL Start = "5"> . Thus, the numbering starts from 5 and then proceeds with 6,7,8,... and so on.

The start attribute sets the starting value of the item (it must be an integer) and the type  attribute sets the numbering style. For example, the following ordered list starts numbering from V and continues with VI, VII,... and so on. The output of this code is shown in figure.




 

Definition lists

A definition list is a list of terms and the corresponding definition

  

Comments

Popular posts from this blog

Basic concept of HTML documents

Inserting image