HTML Lists
HTML Lists are used all the time on the world wide web. There are three types of lists in HTML: unordered, ordered and description.
1) Unordered List
The ul element opens and closes an unordered list. The items on the list are contained between list item li tags. A simple unordered list containing 3 items could be created like this:
<ul>
<li>B.E.</li>
<li>B.Tech.</li>
<li>MCA</li>
</ul>
Example 12 [Creating Unordered List]:-
The unordered list items will be marked with bullets (small black circles or discs) by default. But we could use any one of the values of its type attribute like: disc, circle, square or none. We choose ‘circle’ here. See the code below:
<html>
<body>
<ul type="circle">
<li>B.E.</li>
<li>B.Tech.</li>
<li>MCA</li>
</ul>
</body>
</html>
Output:
2) Ordered List
to create an ordered list, the ol tag is used rather than the ul tag. By making this one change, we can convert the unordered list in our previous example into an ordered list. We also ensure that these items appear in a specific sequential order:
<ol>
<li>B.E.</li>
<li>B.Tech.</li>
<li>MCA</li>
</ol>
<html>
<body>
<ol type="1">
<li>B.E.</li>
<li>B.Tech.</li>
<li>MCA</li>
</ol>
</body>
</html>
Output:
3) Description List
To create an description list, we use the dl tag. Description lists are used to contain name-value groups. Each name-value group consists of one name, or term, placed between dt tags, followed by one or more values with each value, or description, placed between dd tags. See the example below.
Example 14 [Creating Description List]:-
The following example shows the use of description list.
<html>
<body>
<dl>
<dt>UG Courses</dt>
<dd>B.Sc.</dd>
<dd>B.E.</dd>
<dd>B.Tech</dd>
<dt>PG Courses</dt>
<dd>M.Sc.</dd>
<dd>MCA</dd>
<dd>M.E.</dd>
<dd>M.Tech</dd>
<dt>Other Courses</dt>
<dd>M.Phil</dd>
<dd>Ph.D</dd>
</dl>
</body>
</html>
Output:
