HTML Lists
HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types of
HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers
by default. It is known as numbered list also. The ordered list starts
with <ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Ordered List | HTML Numbered List
HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. We can use ordered list to represent items either
in numerical order format or alphabetical order format, or any format where an order
is emphasized. There can be different types of numbered list:
o Numeric Number (1, 2, 3)
o Capital Roman Number (I II III)
o Small Roman Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type Description
Type This is the default type. In this type, the list items are
"1" numbered with numbers.
Type In this type, the list items are numbered with upper case roman
"I" numbers.
Type In this type, the list items are numbered with lower case roman
"i" numbers.
Type In this type, the list items are numbered with upper case
"A" letters.
Type In this type, the list items are numbered with lower case letters.
"a"
HTML Ordered List Example
Let's see the example of HTML ordered list that displays 4 topics in numbered list.
Here we are not defining type="1" because it is the default type.
Write a HTML code to produce following result-
5. HTML
6. Java
7. JavaScript
8. SQL
Display your this semester subjects in list using Capital Roman Number (I II III)
Note: Some of the output are written wrong, you have to
correct it.
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="I"
Let's see the example to display list in roman number uppercase.
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="i"
Let's see the example to display list in roman number lowercase.
<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="A"
Let's see the example to display list in alphabet uppercase.
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="a"
Let's see the example to display list in alphabet lowercase.
<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
<ol type="i" start="5">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If
you use the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5,
4......1).
Example:
<ol reversed>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It
is also known as bulleted list also. The Unordered list starts with
<ul> tag and list items start with the <li> tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in
bulleted format . We can use unordered list where we do not need
to display items in any particular order. The HTML ul tag is used for
the unordered list. There can be 4 types of bulleted list:
o disc
o circle
o square
o none
To represent different ordered lists, there are 4 types of attributes in
<ul> tag.
Type Description
Type "disc" This is the default style. In this style, the list items are
marked with bullets.
Type In this style, the list items are marked with circles.
"circle"
Type In this style, the list items are marked with squares.
"square"
Type "none" In this style, the list items are not marked .
HTML Unordered List Example
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="square"
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="none"
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
Note: The type attribute is not supported in HTML5, instead of type you can use CSS
property of list-style-type. Following is the example to show the CSS property for ul
tag.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>The type attribute with CSS property</h2>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
Output:
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML
and XHTML. It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present
glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML Nested List
A list within another list is termed as nested list. If you want a bullet
list inside a numbered list then such type of list will called as nested
list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
</body>
</html>
Output:
