List in HTML
Lists are the most effective way for listing a items in a web site. There are three types of lists used in html. i.e., bulleted list, a numbered list and a definition list. All lists may contain one or more list elements. There are three different types of HTML lists:
- Ordered List or Numbered List (ol)
- Unordered List or Bulleted List (ul)
- Description List or Definition List (dl)
HTML Ordered List or Numbered List
In html the ordered lists, are used to list items by numbering the item. The ordered list starts with <ol> tag and the list items start with <li> tag.
Syntax: <UL TYPE= “1/a/A/i/I/”>
<!DOCTYPE>
<html>
<body>
<h2> Features of computer </h2>
<ol type = “1”>
<li>Speed</li>
<li>Diligence</li>
<li>Accuracy</li>
<li>Automatic</li>
</ol>
</body>
</html>
Output of the above program
HTML Unordered List or Bulleted List
The <ul> …… </ul> tag is used to define the unordered list. In Unordered list, all the list items are marked with bullets.
Syntax:
<UL TYPE= “disc/circle/square”>
<!DOCTYPE>
<html>
<body>
<h2> Features of computer </h2>
<UL type = “a”>
<li>Speed</li>
<li>Diligence</li>
<li>Accuracy</li>
<li>Automatic</li>
</UL>
</body>
</html>
Output of the program is:
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is defined by <DL> list. It is used with the conjunction <DT> and <DL>.
The HTML definition list contains following three tags:
<dl> tag specify the start of the list.
<dt> tag specifies a term.
<dd> tag specifies the term definition (description).
<!DOCTYPE>
<html>
<body>
<h2> Introduction to computer </h2>
<DL>
<DT>Computer:</DT>
<DD>Computer is an electronic programmable machine that accept data, process them and give meaningful results to the user</DD>
</DL>
</body>
</html>
Output of the above program is:
HTML Nested List
A list within another list is known as nested list. If you want a list inside another list for topic and sub topic we used nested list. For eg: bullet list inside a numbered list.
<!DOCTYPE html>
<html>
<head>
<title>Introduction to Nested list</title>
</head>
<body>
<p>List of Input and output device </p>
<ol type = “a”>
<li>Input devices </li>
<ul type = “disc”>
<li>Mouse</li>
<li>Keyboard</li>
<li>Scanner</li>
</ul>
<li>Output device </li>
<ul>
<li>Monitor</li>
<li>Printer</li>
<li>Plotter</li>
</ul>
</ol>
</body>
</html>
Output of the above program
