Tags for Lists
There are 3 types of lists that can be created in HTML:
Ordered List – used to display each item which is preceded by Number or Alphabet
Unordered List – used to display each item with a bullet by default, and does not use numbers or alphabets
Definition List – used to display each item as terms and its definitions
Unordered Lists:
<ul> tag is used to create an unordered list. Each list item is created using <li> tag. The HTML code given below shows the usage of <ul> tag.
[html]
<html>
<head>
<title>Unordered List Tag</title>
</head>
<body>
<p>This is the demonstration of Unordered List</p>
<h1>States</h1>
<ul>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ul>
<p>The above text displays the unordered list</p>
</body>
</html>
[/html]
The output of the above HTML code is shown below where the names of states are displayed as an unordered list with a bullet for each List Item:
The video below demonstrates the complete working of HTML List tags
Ordered List:
<ol> tag is used to create an ordered list. Each item is created using <li> tag. The HTML code to demonstrate the usage of <ol> is given below:
[html]
<html>
<head>
<title>Ordered List Tag</title>
</head>
<body>
<p>This is the demonstration of Ordered List</p>
<h1>States</h1>
<ol>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where the List Items starts with 4</p>
<ol start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
In the HTML code given above, the ordered list from line 8 to line 13 uses the default ordering for the list items.
By default, the list items in an ordered list are preceded by number starting with “1”. <ol> tag provides an attribute start, through which list items can start with an arbitrary number or alphabet provided in start attribute. Note that the attribute start can have only numbers. For example, the ordered list created from line 15 to line 19 uses the start attribute whose value is set at “4”, therefore the list items will start from number “4” instead of default number “1”. The output of the above HTML code is shown below:
By default, the list items in an ordered list begin with a number. To change the way list items are numbered, <ol> tag has an attribute “type”, through which list items can have numbers, roman numerals, or alphabets. The type attribute has defined values which are shown below:
1 – Numbers (1, 2, 3, 4, 5, 6….)
a – Lowercase Alphabets (a, b, c, …)
A – Uppercase Alphabets (A, B, C, …)
i – Lowercase Roman Numerals (i, ii, iii, iv, ….)
I – Uppercase Roman Numerals (I, II, III, IV, ….)
The HTML code to demonstrate the use of “type” attribute with a value “a” is given below:
[html]
<html>
<head>
<title>Ordered List Tag with Type Attribute Lower Case Alphabets</title>
</head>
<body>
<p>This is the demonstration of Ordered List where List Items are ordered according to Lowercase Alphabets</p>
<h1>States</h1>
<ol type=”a”>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where List Items are ordered according to Lowercase Alphabets and starts with 4th Alphabets</p>
<ol type=”a” start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
In the above HTML code, the ordered list from line 8 to line 13 uses the “type” attribute with the value “a” defining the list items to start numbering from lower case alphabets which can be seen in the output below. The ordered list defined from line 15 to line 19, consisting of “type” as well as “start” attribute with a value “4”, therefore the list items defined from line 15 to line 19 starts numbering with “d”. The output of the above HTML code is shown below:
The HTML code to demonstrate the use of “type” attribute with a value “a” is given below:
[html]
<html>
<head>
<title>Ordered List Tag with Type Attribute Upper Case Alphabets</title>
</head>
<body>
<p>This is the demonstration of Ordered List where List Items are ordered according to Uppercase Alphabets</p>
<h1>States</h1>
<ol type=”A”>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where List Items are ordered according to Uppercase Alphabets and starts with 4th Alphabets</p>
<ol type=”A” start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
In the above HTML code, the ordered list from line 8 to line 13 uses the “type” attribute with the value “A” defining the list items to start numbering from upper case alphabets which can be seen in the output below. The ordered list defined from line 15 to line 19, consisting of “type” as well as “start” attribute with a value “4”, therefore the list items defined from line 15 to line 19 starts numbering with “D”. The output of the above HTML code is shown below:
The HTML code to demonstrate the use of “type” attribute with a value “i” is given below:
[html]
<html>
<head>
<title>Ordered List Tag with Type Attribute Lower Case Roman</title>
</head>
<body>
<p>This is the demonstration of Ordered List where List Items are ordered according to Lowercase Roman Numericals</p>
<h1>States</h1>
<ol type=”i”>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where List Items are ordered according to Lowercase Roman Numericals and starts with 4th number</p>
<ol type=”i” start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
In the above HTML code, the ordered list from line 8 to line 13 uses the “type” attribute with the value “i” defining the list items to start numbering from lower case Roman numerals which can be seen in the output below. The ordered list defined from line 15 to line 19, consisting of “type” as well as “start” attribute with a value “4”, therefore the list items defined from line 15 to line 19 starts numbering with “iv”. The output of the above HTML code is shown below:
The HTML code to demonstrate the use of “type” attribute with a value “I” is given below:
[html]
<html>
<head>
<title>Ordered List Tag with Type Attribute Upper Case Roman</title>
</head>
<body>
<p>This is the demonstration of Ordered List where List Items are ordered according to Uppercase Roman Numericals</p>
<h1>States</h1>
<ol type=”I”>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where List Items are ordered according to Uppercase Roman Numericals and starts with 4th number</p>
<ol type=”I” start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
In the above HTML code, the ordered list from line 8 to line 13 uses the “type” attribute with the value “I” defining the list items to start numbering from upper case Roman numerals which can be seen in the output below. The ordered list defined from line 15 to line 19, consisting of “type” as well as “start” attribute with a value “4”, therefore the list items defined from line 15 to line 19 starts numbering with “IV”. The output of the above HTML code is shown below:
The individual number of the list items can also be changed by using the value attribute in the <li> tag. This can be applied to any type of list. The HTML code given below demonstrates the use of value attribute in the <li> tag:
[html]
<html>
<head>
<title>Ordered List Tag</title>
</head>
<body>
<p>This is the demonstration of Ordered List</p>
<h1>States</h1>
<ol>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li value=”7″>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
<p>This is the demonstration of Ordered List where the List Items starts with 4</p>
<ol start=”4″>
<li>Andhra Pradesh</li>
<li>Karnataka</li>
<li value=”1″>Telangana</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
The output of the above HTML code is shown below, where the third list item is assigned number “7”. Note that the list item subsequent to the list item which was assigned a value will continue the numbering with the increment from that value. For example, the next list item is assigned number “8”. This can also be observed from the second list displayed in the output shown below.
Definition List:
<dl> tag is used to create definition list. The tag <dt> is used to define term and the tag <dd> is used for description. The HTML code to demonstrate the <dl> tag is given below:
[html]
<html>
<head>
<title>Definition List Tag</title>
</head>
<body>
<p>This is the demonstration of Definition List</p>
<h1>States</h1>
<dl>
<dt>AP</dt>
<dd>Andhra Pradesh</dd>
<dt>KA</dt>
<dd>Karnataka</dd>
<dt>TS</dt>
<dd>Telangana</dd>
<dt>UP</dt>
<dd>Uttar Pradesh</dd>
</dl>
<p>The above text displays the Definition List</p>
</body>
</html>
[/html]
In the above HTML code <dl> tag in line 8 defines the definition list. The <dt> tag describes the definition term and <dd> tag describes the definition description. The output for the above HTML code is shown below:
Nesting of Lists
The lists can be nested, which means one type of list can be contained in another type of list. The HTML code given below demonstrates nested lists.
[html]
<html>
<head>
<title>Ordered List Tag</title>
</head>
<body>
<p>This is the demonstration of Nested List</p>
<h1>States</h1>
<ol>
<li>Andhra Pradesh</li>
<li>Karnataka
<ol type=”i”>
<li>District 1</li>
<li>District 2</li>
<li>District 3</li>
</ol>
</li>
<li>Telangana
<ul>
<li>County 1</li>
<li>County 2</li>
</ul>
</li>
<li>Uttar Pradesh</li>
</ol>
</body>
</html>
[/html]
The output of the above HTML code is shown below. The list item 2 has nested ordered list of type lower roman numerals and list item 3 has unordered list.
