HTML List
All
lists must contain one or more list elements. Lists may contain −
<ul> − An unordered list. This will list items using
plain bullets.
<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.
Example
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul>
<li>Mango</li>
<li>Grapes</li>
<li>Banana</li>
<li>Apple</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 −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following
is an example where we used <ul type = "square">
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Example
Following
is an example where we used <ul type = "disc"> −
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul type = "disc">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ul>
</body>
</html>
Example
Following
is an example where we used <ul type = "circle"> −
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul type = "circle">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</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.
Example
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
The type Attribute
You
can use type attribute for <ol> tag to specify the type of
numbering you like. By default, it is a number. Following are the possible
options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following
is an example where we used <ol type = "1">
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "1">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
Example
Following
is an example where we used <ol type = "I">
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "I">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
Example
Following
is an example where we used <ol type = "i">
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "i">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
Example
Following
is an example where we used <ol type = "A" >
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "A">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
Example
Following
is an example where we used <ol type = "a">
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "a">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
The start Attribute
You
can use start attribute for <ol> tag to specify the starting
point of numbering you need. Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
Following
is an example where we used <ol type = "i" start = "4"
>
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type = "i"
start = "4">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
HTML Definition Lists
HTML
and XHTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is
the ideal way to present a glossary, list of terms, or other name/value list.
Definition
List makes use of following three tags.
<dl>
− Defines the start of the list
<dt>
− A term
<dd>
− Term definition
</dl>
− Defines the end of the list
Example
<html>
<head>
<title>HTML
Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands
for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands
for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
No comments:
Post a Comment