HTML-Lists
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 the following results:
- 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 the 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>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce the 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 the following results
- 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>.
Ouput-
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"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Example
Following is an example where we used <ol type="1">
Example
Following is an example where we used <ol type="I">
Example
Following is an example where we used <ol type="i">
Output
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" >
Output
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.
1.<dl> - Defines the start of the list.
2.<dt> - A term
3.<dd> - Term definition
4.</dl> - Defines the end of the list.
Output
0 Comments