Lecture Notes Of Class 4:
Lists in HTML
1.
Introduction to Lists in HTML
Lists are fundamental
in organizing and presenting information on a web page. HTML provides three
main types of lists:
1.
Unordered Lists
2.
Ordered Lists
3.
Definition Lists
Each list type has
its specific use and structure. Let's explore these in detail.
A.
Unordered Lists
Definition: Unordered lists are used to group items that do not have a
specific order. They are typically displayed with bullet points.
HTML
Structure:
<ul>
<li>Item
1</li>
<li>Item
2</li>
<li>Item
3</li>
</ul>
- <ul>:
Defines the unordered list.
- <li>:
Defines a list item.
Example:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Unordered
List Example</title> </head> <body> <h2>Shopping
List</h2> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </body> </html> |
B.
Ordered Lists
Definition: Ordered lists are used to group items in a specific sequence. They
are displayed with numbers or letters.
HTML
Structure:
<ol>
<li>First
item</li>
<li>Second
item</li>
<li>Third
item</li>
</ol>
- <ol>:
Defines the ordered list.
- <li>:
Defines a list item.
Example:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Ordered
List Example</title> </head> <body> <h2>Steps
to Make Tea</h2> <ol> <li>Boil
water.</li> <li>Add
tea leaves or tea bag.</li> <li>Steep
for 3-5 minutes.</li> <li>Strain
and serve.</li> </ol> </body> </html> |
Customizing
List Numbers:
You can customize the
type of list marker using the type attribute:
- type="1":
Numbers (default)
- type="a":
Lowercase letters
- type="A":
Uppercase letters
- type="i":
Lowercase Roman numerals
- type="I":
Uppercase Roman numerals
Example:
<ol
type="A">
<li>Step
One</li>
<li>Step
Two</li>
<li>Step
Three</li>
</ol>
C.
Definition Lists
Definition: Definition lists are used to list terms and their corresponding
definitions.
HTML
Structure:
<dl>
<dt>Term
1</dt>
<dd>Definition
of Term 1</dd>
<dt>Term
2</dt>
<dd>Definition
of Term 2</dd>
</dl>
- <dl>:
Defines the definition list.
- <dt>:
Defines a term.
- <dd>:
Defines the term's description.
Example:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Definition
List Example</title> </head> <body> <h2>HTML
Tags</h2> <dl> <dt><ul></dt> <dd>Defines
an unordered list.</dd> <dt><ol></dt> <dd>Defines
an ordered list.</dd> <dt><dl></dt> <dd>Defines
a definition list.</dd> </dl> </body> </html> |
D.
Nested Lists
Definition: Nested lists involve placing one list inside another. This is
useful for representing hierarchical information.
HTML
Structure:
<ul>
<li>Item
1
<ul>
<li>Sub-item
1.1</li>
<li>Sub-item
1.2</li>
</ul>
</li>
<li>Item
2</li>
</ul>
Example:
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Nested
List Example</title> </head> <body> <h2>Task
List</h2> <ul> <li>Work <ul> <li>Complete
report</li> <li>Attend
meeting</li> </ul> </li> <li>Personal <ul> <li>Buy
groceries</li> <li>Exercise</li> </ul> </li> </ul> </body> </html> |
6.
Summary
Lists in HTML are
essential for organizing content.
There are three main
types of lists:
- Unordered
Lists: Use <ul> and <li> to create
bulleted lists.
- Ordered
Lists: Use <ol> and <li> to create
numbered or lettered lists.
- Definition
Lists: Use <dl>, <dt>, and <dd>
for terms and definitions.
Nested Lists allow for the creation of hierarchical structures, making them
useful for detailed categorization.
******************************************