HTML LISTS
http://www.tutorialspoint.com/html/html_lists.htm
Copyright tutorialspoint.com
HTML offers web authors three ways for specifying lists of information. 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
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce following result:
Beetroot
Ginger
Potato
Radish
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">
<!DOCTYPE html>
<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>
This will produce following result:
Beetroot
Ginger
Potato
Radish
Example
Following is an example where we used <ul type="disc"> :
<!DOCTYPE html>
<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>
This will produce following result:
Beetroot
Ginger
Potato
Radish
Example
Following is an example where we used <ul type="circle"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce following result:
Beetroot
Ginger
Potato
Radish
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
<!DOCTYPE html>
<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>
This will produce following result:
1. Beetroot
2. Ginger
3. Potato
4. Radish
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
<ol
<ol
<ol
<ol
type="1">
type="I">
type="i">
type="a">
type="A">
Default-Case Numerals.
Upper-Case Numerals.
Lower-Case Numerals.
Lower-Case Letters.
Upper-Case Letters.
Example
Following is an example where we used <ol type="1">
<!DOCTYPE html>
<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>
This will produce following result:
1. Beetroot
2. Ginger
3. Potato
4. Radish
Example
Following is an example where we used <ol type="I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
I. Beetroot
II. Ginger
III. Potato
IV. Radish
Example
Following is an example where we used <ol type="i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
i. Beetroot
ii. Ginger
iii. Potato
iv. Radish
Example
Following is an example where we used <ol type="A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
A. Beetroot
B. Ginger
C. Potato
D. Radish
Example
Following is an example where we used <ol type="a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
a. Beetroot
b. Ginger
c. Potato
d. Radish
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">
<ol type="I" start="4">
- Numerals starts with 4.
- Numerals starts with IV.
<ol type="i" start="4">
<ol type="a" start="4">
<ol type="A" start="4">
- Numerals starts with iv.
- Letters starts with d.
- Letters starts with D.
Example
Following is an example where we used <ol type="i" start="4" >
<!DOCTYPE html>
<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>
This will produce following result:
iv. Beetroot
v. Ginger
vi. Potato
vii. Radish
HTML Definition Lists
HTML and XHTML support 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
<!DOCTYPE html>
<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>
This will produce following result:
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
