Lists
in HTML
HTML
supports three types of lists viz. numbered, unnumbered and definition. These
lists are called as Ordered List, Unordered List and Definition List
respectively.
Numbered
list is created within the tag pair <OL>
….. </OL> tag. The tag <LI>
is used to present the list item in the list. Ordered list displays items in a
numerical or alphabetical order. Both <OL>
and <LI> tags are container
tags. But the usual the practice, closing tag </LI> never be used.
<html>
<head>
<title>
Number List </title>
</head>
<body>
<OL>
<LI> Tamil
<LI> Telugu
<LI> English
<LI> Computer Application
<LI> Commerce
<LI> Accountancy
<LI> Economics
</OL>
</body>
</html>
There
are two attributes can be used to customize ordered list, they are
(1) Type
- changing numbering style
(2) Start
- changing numbering order.
Type – is used to change the number
style. The default number style is standard Arabic numerals (1,2,3,…………).
Start – is used to specify the
number of letter with which start the list. The default starting point is 1. The value of the start attribute should be a decimal number,
regardless of the numbering style being used.
<html>
<head>
<title>
Attribute of OL tag </title>
</head>
<body>
<OL type=i
start=5>
<LI> Physics
<LI> Chemistry
<LI> Biology
<LI> Botany
<LI> Zoology
</OL>
</body>
</html>
Unordered
lists are often referred as bulleted lists. Instead of numbers, each element in
the list has prefixed with a special bullet symbol. Unordered list is
surrounded within <UL>……… </UL> tags. As discussed above, each list
element is defined by <LI> tag.
<html>
<head>
<title>
Unordered List </title>
</head>
<body>
<UL>
<LI> Chennai
G Hr. Sec. School, Rotler Street, Chennai 600 112.
<LI>
Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> S.M.B.
Jain Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> Chennai
G Hr. Sec. School, Nungambakkam, Chennai 600 034.
<LI> Chennai
G Hr. Sec. School, Saidapet West, Chennai 600 015
<LI> Santhome
Hr. Sec. School, Mylapore, Chennai 600 004.
</UL>
</body>
</html>
Like
ordered list, type attribute is used
to customize bullet style for the list of elements.
By
default, a solid circle is used as bullets.
Table: 11.4
Type
value : Numbering style
Disc : A solid circle
Square
: A solid square
Circle
: An unfilled circle
<html>
<head>
<title>
Attribute of UL tag </title>
</head>
<body>
<UL>
<LI> Chennai
G Hr. Sec. School, Rotler Street, Chennai 600 112.
<LI>
Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017.
</UL>
<UL type=square>
<LI> S.M.B.
Jain Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> Chennai
G Hr. Sec. School, Nungambakkam, Chennai 600 034.
</UL>
<UL type=circle>
<LI> Chennai
G Hr. Sec. School, Saidapet West, Chennai 600 015
<LI> Santhome
Hr. Sec. School, Mylapore, Chennai 600 004.
</UL>
</body>
</html>
Definition
list is different from other two types of list. No bullet or number is provided
for the list items. In this list type, the list element has two parts.
(1)
A
definition term
(2)
The
definition description
Definition
list is surrounded within <DL> ……. </DL> tags.
Definition
term is presented in between <DT> ….. </DT> tag and
Definition
description should be surrounded within <DD> ………… </DD> tag.
<html>
<head>
<title>
Definition List </title>
</head>
<body>
<DL>
<DT> HTML: </DT>
<DD> Hyper Text Markup
Language </DD> <DT> Webpage:
<DD> A web page is a
document that is suitable for the World Wide Web and web browsers. A web browser displays a web page on a monitor or
mobile device. </DD>
</DL>
</body>
<html>
A
list block can be defined inside another list is called as nested list.
<html>
<head>
<title>
Nested List </title>
</head>
<body>
<OL>
<LI> Districts of Tamilnadu
<UL type=A>
<LI> Chennai
<LI> Madurai
<LI>
Coimbatore
</UL>
<LI> District of Kerala
<UL type=A>
<LI>
Thiruvananthapuram
<LI> Palakkad
<LI> Idukki
<UL>
</OL>
<body>
<html>
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.