Scribd
Upload
35 views9 pages

Web Lec 9

The document discusses different types of lists that can be created in HTML, including unordered lists, ordered lists, and definition lists. It provides examples of how to create each type of list using the appropriate HTML tags (<ul>, <ol>, <dl>) and how to customize lists further using attributes like type, start, etc. Key list types covered are unordered lists using <ul> with bullet points, ordered lists using <ol> with numbers, and customizing the bullet/number style using attributes.

Uploaded by

kingadvlqp
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
35 views9 pages

Web Lec 9

The document discusses different types of lists that can be created in HTML, including unordered lists, ordered lists, and definition lists. It provides examples of how to create each type of list using the appropriate HTML tags (<ul>, <ol>, <dl>) and how to customize lists further using attributes like type, start, etc. Key list types covered are unordered lists using <ul> with bullet points, ordered lists using <ol> with numbers, and customizing the bullet/number style using attributes.

Uploaded by

kingadvlqp
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/ 9

Aspire College Liaquat Pur Lecturer: M.

Ramzan

Web Technologies
BS IT (5th Semester)
Lists in HTML:
HTML offers web authors three ways for specifying lists of information. All lists must contain
one or more list elements. Lists may contain −
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a
dictionary.

HTML Unordered Lists:


An unordered list is a collection of related items that have no special order or sequence. This
list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

1
Aspire College Liaquat Pur Lecturer: M.Ramzan

This will produce the following result:

• Beetroot
• Ginger
• Potato
• Radish

The type Attribute


You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

2
Aspire College Liaquat Pur Lecturer: M.Ramzan

This will produce the following result:

▪ Beetroot
▪ Ginger
▪ Potato
▪ Radish

Example
Following is an example where we used <ul type = "circle"> −
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce the following result:

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists:


If you are required to put your items in a numbered list instead of bulleted, then HTML ordered
list will be used. This list is created by using <ol> tag. The numbering starts at one and is
incremented by one for each successive ordered list element tagged with <li>.

3
Aspire College Liaquat Pur Lecturer: M.Ramzan

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute


You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is
a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

4
Aspire College Liaquat Pur Lecturer: M.Ramzan

Example
Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example
Following is an example where we used <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>

5
Aspire College Liaquat Pur Lecturer: M.Ramzan

<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example
Following is an example where we used <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

6
Aspire College Liaquat Pur Lecturer: M.Ramzan

</html>
This will produce the following result:

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example
Following is an example where we used <ol type = "A" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

A. Beetroot
B. Ginger
C. Potato
D. Radish

7
Aspire College Liaquat Pur Lecturer: M.Ramzan

Example
Following is an example where we used <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute


You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

8
Aspire College Liaquat Pur Lecturer: M.Ramzan

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

You might also like