List in HTML

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

List in HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

List in HTML

Uploaded by

Copyright:

Available Formats

List in HTML

Unordered Ordered Definition

There are 3 basic type of lists in HTML:

And the output produced is:

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

Square List starts with square symbol

Circle List starts with hollow circle

Disc Default value list starts with circle

<html> <ul type="circle">

<LI> Apples Used inside: Body - content

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

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

<li> and so forth.</li>

By default, browsers number ordered number list items with the

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

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

<li> the numerals increment by

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

Attribute: dt, dd, -content

Used inside: Body - content

Here is a sample nested list:

You might also like