2. Lists
• Lists are special features of HTML, that
are used to display a list of things.
• They are very powerful in execution and
provides special attributes to give more
effect in their appearance.
3. Types of list
• There are three types of lists in html
(i) Ordered List – list labelled with numbers,
letters or roman numerals.
(ii) Unordered List – list labelled with bullets
or some other symbols.
(iii) (iii) Definition List – list in which each
item has a term and a definition for every
term.
4. Ordered lists
• Ordered lists are enclosed by <OL> and </OL> tag.
• Each item within the list begins with the <LI> (list item) tag.
• By default <OL> tag displays the list item in Arabic numerals
and hence it is also called as Numbered list.
• Ordered list allows the user to specify the style of numbering
using the attribute “type”.
Type = “1” will start numbering from 1, 2, 3…
Type = “I” will start numbering from I, II, III…
Type = “A” will start numbering as A, B, C….
• It also has an option to specify the starting number of the list
using start attribute.
• Eg., <OL Type = “1” start = “7”> will start numbering from “7”.
5. Example for ordered list
<HTML>
<HEAD>
<TITLE> Ordered list </TITLE>
</HEAD>
<BODY>
<OL Type = “a”>
<LI> Platinum
<LI> Gold
<LI> Diamond
<LI> Silver
</OL>
</BODY>
</HTML>
6. Unordered list
• Unordered list are similar to ordered list but
instead of numbers and letters, the list appears
in bullets and hence it is also called as “bulleted
list”.
• The “type” attribute is used to specify the style of
the bullet.
• By default, the list items are displayed with
Circle bullet.
Type = “Disc” – will display a small disc circle
Type = “square” – will display a solid square
Type = “circle” – will display a hollow circle.
7. Example for unordered list
<HTML>
<HEAD>
<TITLE> Unordered list </TITLE>
</HEAD>
<BODY>
<UL Type = “Circle”>
<LI> Platinum
<UL Type = “Square”>
<LI> Gold
<LI> Diamond
<UL Type = “Disc”>
<LI> Silver
</UL>
</BODY>
</HTML>
8. Definition list
• Definition lists are not based on list items,
instead they are based on term definition.
• The beginning and ending tag of definition
list is <DL> and </DL>.
• The definition terms is preceded by <DT>
tag and in turn the actual definition for the
term is preceded by <DD>.
• <DT> - definition list term
• <DD> - definition list definition
9. Example for definition list
<HTML>
<HEAD>
<TITLE> definition list </TITLE>
</HEAD>
<BODY>
<DL>
<DT> MS Word
<DD> It is a word processor application
<DT> MS Excel
<DD> It is a spread sheet application
<DT> MS PowerPoint
<DD> It is used to create presentations
</DL>
</BODY>
</HTML>
