Scribd
Upload
5 views5 pages

List

The document provides an overview of HTML lists, detailing three main types: Ordered Lists, Unordered Lists, and Description Lists. Each list type is explained with its purpose, associated HTML tags, and attributes. Examples of each list type are included to illustrate their usage in HTML code.

Uploaded by

024CSE DHARSHINI.A
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
5 views5 pages

List

The document provides an overview of HTML lists, detailing three main types: Ordered Lists, Unordered Lists, and Description Lists. Each list type is explained with its purpose, associated HTML tags, and attributes. Examples of each list type are included to illustrate their usage in HTML code.

Uploaded by

024CSE DHARSHINI.A
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/ 5

<!-- !

LIST IN HTML -->

- HTML lists allow you to group a set of related items together in a


structured format.
- Lists in HTML are categorized into three types:
1. Ordered List
2. Unordered List
3. Description List

1. Ordered List
- Purpose: Used to group related items in a sequential, numbered format. It
is often referred to as a Number List.
- Tags:
- <ol>: Denotes the start of an ordered list.
- <li>: Indicates each list item within the ordered list.
- Attributes:
- type: Specifies the type of numbering sequence.
- Values:
- 1 (default) - Numeric (1, 2, 3, ...)
- A - Uppercase letters (A, B, C, ...)
- a - Lowercase letters (a, b, c, ...)
- I - Uppercase Roman numerals (I, II, III, ...)
- i - Lowercase Roman numerals (i, ii, iii, ...)
- start: Specifies the starting number of the list.
- Values:
- 1 (default)
- Any other number to start the list from.
- reversed: Reverses the order of the list items.

2. Unordered List
- Purpose: Used to display a set of related items without any particular
order. Commonly referred to as a Bulleted List.
- Tags:
- <ul>: Indicates the start of an unordered list.
- <li>: Indicates each list item within the unordered list.
- Attributes:
- type: Specifies the type of bullet symbol.
- Values:
- disc (default) - Solid circle
- circle - Hollow circle
- square - Solid square
- none - No bullet, just plain list items
3. Description List
- Purpose: Used to display a list of terms and their associated
descriptions. This is often used for glossaries, or to define terms and their
meanings.
- Tags:
- <dl>: Indicates the start of a description list.
- <dt>: Represents a description term.
- <dd>: Represents a description definition, providing more information
about the term.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List</title>
</head>
<body>
<h1>List</h1>
<p>here we will learn about list</p>
<hr />

<h2>Unordered List</h2>

<!-- by default it will give disc in unordered list -->


<ul>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<!-- type attribute we are using to change the list style -->

<ul type="circle">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>
<ul type="square">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<ul type="none">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<!-- ! nested list -->

<h3>Nested List</h3>

<ul>
<l>Science</l>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Bio</li>
</ul>
<li>Arts</li>
<ul>
<li>Geography</li>
<li>History</li>
<li>English</li>
</ul>
<li>Commerce</li>
</ul>

<!-- ! Ordered List -->

<!-- by default it will give numbers for list style -->


<h2>Ordered List</h2>
<ol>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>
<ol type="A">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="a">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="i">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="I">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<h2> reversed order list</h2>


<!-- it is used to reverse the order of the list style -->
<ol type="a" reversed>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<h2> start attribute</h2>


<!-- start attribute is used to define the start point for integer list
style -->
<ol type="1" start="10">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>
<!-- ! Description List -->

<h2>Description List</h2>

<dl>
<dt>HTML</dt>
<dd>Hyper Text MarkUp language</dd>
</dl>

</body>
</html>

You might also like