0% found this document useful (0 votes)
8 views18 pages

HTML Lists: Types and Examples

The document explains the different types of lists in HTML, including unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>). It provides examples of how to create these lists and how to use attributes like 'type' and 'start' to customize their appearance. Additionally, it discusses the nesting of lists and the use of hyperlinks in HTML.

Uploaded by

forspam3009
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
0% found this document useful (0 votes)
8 views18 pages

HTML Lists: Types and Examples

The document explains the different types of lists in HTML, including unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>). It provides examples of how to create these lists and how to use attributes like 'type' and 'start' to customize their appearance. Additionally, it discusses the nesting of lists and the use of hyperlinks in HTML.

Uploaded by

forspam3009
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

All lists must contain one or more list

elements. Lists may contain −

<ul> − An unordered list. This will list


items using plain bullets.
LIST
<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.
• <html> <head> <title>HTML Unordered
List</title> </head> <body> <ul>
EXAMPLE <li>Beetroot</li> <li>Ginger</li>
<li>Potato</li> <li>Radish</li> </ul> </body>
</html>
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 −
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
EXAMPLE <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
EXAMPLES
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
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>.
EXAMPLE
• <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>
• You can use type attribute
for <ol> tag to specify the THE TYPE
type of numbering you
like. By default, it is a ATTRIBUTE
number. Following are the
possible options −
EXAMPLE
• <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>
• You can use start attribute
for <ol> tag to specify the
starting point of
THE START
numbering you need.
Following are the possible
ATTRIBUTE
options −
EXAMPLE
• <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>
• Specified using the tag
• <DL>………</DL>
• Each definition comprises
of a definition term
(<DT>) and a definition
description (<DD>) DEFINITION LIST
• Web browsers format each
definition on a new line
and indent it.
EXAMPLE

• <h1> Some Important Protocol </h1>


• <DT>
• <DT>TCP
• <DD> Transmission Protocol
• <DT>UDP
• <DD>User Datagram Protocol
• <DT>IP
• <DD> Internet Protocol
• </DT>
Any List can be nested within
another list

NESTING OF When unnumbered lists are


nested , the browser
LISTS automatically uses a different
bullets symbol for each level.

When numbered list are


nested by default every level
is numbered using the
number (1,2,3…)
EXAMPLE

• <OL>
• <li> one</li>
• <li> two</li>
• <OL>
• <li> Inner one</li>
• <li> Inner two</li>
• </OL>
• <li> Three</li>
• </OL>
HTML has ability to text and/or images to
another documents or section of a
document.

These links are called Hyperlinks.

HYPERLINK Browsers by default highlights the


hyperlinks with color and/or underline

Specify using the anchor tag

<a>…….</a>
Require an attribute called
“HREF” which specify the
path of the resources to be
linked

CONT..

<a href=“[Link]”> Search


</a>

You might also like