Scribd
Upload
11 views

LIST

The document discusses different types of lists that can be used in HTML including ordered lists, unordered lists, definition lists, nested lists, directory lists, and menu lists. It provides details on the tags used to define each type of list and their attributes and uses examples to illustrate them.

Uploaded by

arya manchanda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

LIST

The document discusses different types of lists that can be used in HTML including ordered lists, unordered lists, definition lists, nested lists, directory lists, and menu lists. It provides details on the tags used to define each type of list and their attributes and uses examples to illustrate them.

Uploaded by

arya manchanda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Also anchor tag can be used to add the picture and with

picture the link can be opened


LIST
When we need to show various items on the same
webpage, it becomes necessary to list them down.

Listing is necessary and needed when we want to


prepare catalogs & indexing various objects.
For listing we can use numbers like- Decimal
(1,2,3,…),
Decimal-zero leading (01,02,03,…),
Lower-roman (i,ii,iii,…),
Upper roman(I,II,III,…),
Lower-alpha(a,b,c,…),
Upper-alpha(A,B,C,…)

For listing we can also use bullets like- disc, circle,


square.
There are 5 different kinds of list-
1. <OL>…</OL>- ordered list
2. <UL>…</UL>- unordered list
3. <DL>…</DL>- definition list
4.<MENU>…</MENU>- menu list (sparsely used)
5.<DIR>…</DIR>- directory list (sparsely used)

Note: Every list use <LI> tag which is a container tag. LI


stands for List Item.
1. UNORDERED LIST
In this list the classification is not important & the list items do not occur
in any particular sorted order.
Unordered list are called so because they are in no particular order in
which they are listed.
It is a container tag- <UL>…</UL>
By default Unordered list use bullets/disc.
Unordered list could have following three attribute values for type
attribute- disc, square, circle.
OUTPUT
OUTPUT
2. ORDERED LIST
Helps in keeping the list items in an organized manner, also list items are properly ranked.
Ordered list is also called “NUMBERED LIST.”

<ol>...</ol>- container tag

By default ordered list always starts from 1.

Ordered list can have following values in its Type attribute- <OL type= “I /i / A/ a/ 1/01”>
EXAMPLE 4
OUTPUT
OUTPUT
CONT…
Start attribute of ordered list-
 It is used to start a specific list from any number other than “1 / 01 / A / a / I / i”
OUTPUT
WHEN OL TAG IS USED WITH START
3. DIFINITION LIST
Used for making glossaries.
A glossary consist of a term and a definition.
Helps in listing data terms and data definitions similar to dictionary.
Tags used-
<DL>…</DL> - DEFINITION LIST
<DT>…</DT>- DATA TERM
<DD>…</DD> - DATA DEFINITION
OUTPUT
OUTPUT
One html document can have
more than one list and also
they can have different types
of lists.
NESTED LIST
One list can contain another list. Or a list could be contained within another list.

Also one type of list could be contained in another type of list i.e. ordered list could be
contained in an unordered list and vice-a-versa.
EXAMPLE 10
OUTPUT
4. DIRECTORY LIST

This list is similar to unordered list.


<DIR>…</DIR>- container tag
It represents a list of short items, typically up to 20
characters each.
Items in a directory list may be arranged in columns
typically 24 characters wide.
Since it is similar to unordered list it is rarely used.
EXAMPLE 11
OUTPUT

By default unordered list


is also in bullets points
5. MENU LIST
This list also called menu item list.
<MENU>…</ MENU >- container tag
This list is also similar to unordered list and hence
shows default output as bullet list.
It is not rendered by all the browsers and some
browsers also displays it as without bullet.
EXAMPLE 12
OUTPUT

You might also like