Scribd
Upload
164 views24 pages

List in HTML

There are three basic types of lists in HTML: unordered, ordered, and definition lists. Unordered lists use the <ul> tag and display bullet points. Ordered lists use the <ol> tag and are numbered. Definition lists use <dl>, <dt>, and <dd> to display term-definition pairs. Lists can be nested within each other for complex hierarchical information.

Uploaded by

Parul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
164 views24 pages

List in HTML

There are three basic types of lists in HTML: unordered, ordered, and definition lists. Unordered lists use the <ul> tag and display bullet points. Ordered lists use the <ol> tag and are numbered. Definition lists use <dl>, <dt>, and <dd> to display term-definition pairs. Lists can be nested within each other for complex hierarchical information.

Uploaded by

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

List in HTML

HTML List

Unordered Ordered Definition


List List List
List in HTML:

There are 3 basic type of lists in HTML:


Unnumbered, numbered and definition. The list
may be nested as well.
1. The unnumbered list begins with <UL> tag
2. The numbered list begins with <OL> tag
3. <LI> tag identifies items in list
4. A definition list requires separate tags for
each terms and definition like <DL>, <DT>
and <DD>.
Unnumbered or Unordered List
The unnumbered or unordered list are the
bulleted list, theses list are marked by <UL> UL Tag
tag.
Type: Container Element
To make on unnumbered, bulleted list
1) Start with an opening list <UL> (for Function: Define unordered
unnumbered list) tag. list
2) Enter the <LI> (list item) tag followed by
Attribute: Type
the individual item; no closing </LI> tag
is needed. Used inside: Body - content
3) End the entire list with a closing list
</UL> tag.
Below is a sample three – line list
<UL>

<LI> Apples
<LI> Banana
<LI> Grapes

</UL>

And the output produced is:


• Apples
• Banana
• Grapes
The Type Attribute

The graphical browsers automatically bullet each <UL> - tagged item in


an unordered list. By default, a solid circle used for the bullets.
e.g., <UL type=“square”>

Value Description

Square List starts with square symbol

Circle List starts with hollow circle

Disc Default value list starts with circle


Example to display various bullet types

<html> <ul type="circle">


<head> <li>mango</li>
<title>Various Bullet <li>apple</li>
Style</title> <li>banana</li>
</head> </ul>
<ul type="disc">
<body> <li>mango</li>
<ul type="square"> <li>apple</li>
<li>mango</li> <li>banana</li>
</ul>
<li>apple</li>
</body>
<li>banana</li>
</ul> </html>
Output:
Numbered list or Ordered list
A numbered list (also called an ordered list, from
which the tag name (OL) derives is identical to an OL Tag
unnumbered list, except it uses <OL> instead of
<UL>. The items are tagged using the same <LI> Type: Container Element
tag. The items that are tagged with <LI> appear
numbered e.g., 1,2,3, etc. on the browser window.
For instance, consider the following HTML code: Function: Define an ordered
list
To make on unnumbered, bulleted list
<OL> Attribute: Type, Start

<LI> Apples Used inside: Body - content


<LI> Banana
<LI> Grapes

</OL>
The Start Attribute
Normally, browsers automatically number ordered list items beginning
with the Arabic numerals 1. The start attribute for the <OL> tag let you
change that beginning value. To start numbering a list at 5, for example
you may write:

<ol Start=“5”>

<li> This is item number 5.</li>

<li> This is number 6.</li>

<li> and so forth.</li>

</ol>
Output:
The Type Attribute:

By default, browsers number ordered number list items with the


sequence of Arabic numerals.
Besides being able to start the sequence at some number other than 1 ,
you can use the type attribute with the <OL> tag to change the
numbering style itself.
With the <OL> tag, the tag attributes may have a value of A for
numbering, i for lowercase Roman numerals, or 1 for common Arabic
numerals.
Table HTML type value for numbering Ordered List
Type Value Generated Style Sample sequence

A CAPITAL LETTERS A,B,C,D

a Lowercase letters A,b,c,d

I Capital Roman Numerals I,II,III,IV

I Lowercase Roman Numerals I,ii,iii,iv

1 Arabic Numerals 1,2,3,4


Subsequent items are numbered with the same style, each value
incremented by 1 as shown in example:

<html>
<body>
<ol Start="8" type="i">

<li> This is roman number 8.</li>

<li> the numerals increment by


1.</li>

<li> and so forth....</li>

</ol>
</body>
</html>
The result produced are shown below:
Definition List
A definition list (coded as <DL>) usually
consist of alternating a definition term DL Tag
(coded as <DT>) and a definition
description (coded as <DD>). Web browser Type: Container Element
generally format the definition on a new
line and indent it. Function: Define a
definitionlist

Attribute: dt, dd, -content

Used inside: Body - content


<html>
<body>
<p> A Definition list follow:

<dl>
<dt> HTML
<dd> Hypertext markup language is a language that define
webpage.
<dt> Computer
<dd> An electronic device for storing and processing data.
</dl>

</body>
</html>
The output will look like:
Nested Lists
List can be nested. You can also have a number of paragraphs, each containing a
nested list in a single list items.

Here is a sample nested list:

<html>
<li> Two Other states : </li>
<body>
<ol type="a">
<ul>
<li>West Bengal</li>
<li> A few new Indian States:</li>
<li>Karnataka</li>
<ol type="i">
</ul>
<li> Jharkhand </li>
</body>
<li> Uttaranchal </li>
</html>
<li> Chhattisgarh </li>
</ol>
The nested list, as coded above is displayed as shown below:
Nested List Program:
<html>
<head>
<title> Nested List </title>
</head>
<body>
<ul>
<li> Hardware</li>
<ol>
<li> Monitor
<li> Printer
</ol>
<li> Software</li>
<ol>
<li> Application Software
<li> System Software
</ol>
</ul>
</body>
</html>
Thank You

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy