HTML List

There are 3 ways through which we can specify lists in HTML:

1. <ol> – Ordered list. In which we can use different kinds of numbers schemes to list the items.

2. <ul> – UnOrdered list. In which we can use bullets.

3. <dl> – Definition list. Use to arrange the items, way as they are arranged in a dictionary.

Ordered list

<ol> tag is used to start the ordered list and inside <ol> tag each item should get placed inside <li> tag. <li> tag represents the list items.

Example:

<html>
<head> <title> HTML List </title> </head>
<body>
<ol>
<li>Ink</li>
<li>Pen</li>
<li>Paper</li>
</ol>
</body>
</html>

Output:
list

Ordered list with Type attribute

We can use type attribute with <ol> tag to define the list item marker. Below are the possible options :

<ol type=”1″> – this is the default list type, items will get numbered with numbers
<ol type=”A”> – items will get numbered with uppercase letters
<ol type=”a”> – items will get numbered with lowercase letters
<ol type=”I” > – items will get numbered with uppercase roman numbers
<ol type=”i” > – items will get numbered with lowercase roman numbers

Example using type=”A”:

<html>
<body>
<ol type=”A”>
<li>Ink</li>
<li>Pen</li>
<li>Paper</li>
</ol>
</body>
</html>

Output:
list

Example using type=”a”:

<html>
<body>
<ol type=”a”>
<li>Ink</li>
<li>Pen</li>
<li>Paper</li>
</ol>
</body>
</html>

Output:
list

Example using type=”I”:

<html>
<body>
<ol type=”I”>
<li>Ink</li>
<li>Pen</li>
<li>Paper</li>
</ol>
</body>
</html>

Output:
list

Example using type=”i”:

<html>
<body>
<ol type=”i”>
<li>Ink</li>
<li>Pen</li>
<li>Paper</li>
</ol>
</body>
</html>

Output:
list

Unordered list

<ul> tag is used to start the unordered list and inside <ul> tag each item should get placed inside <li> tag.
Example:

<html>
<body>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li> Banana</li>
</ul>
</body>
</html>

Output:
list

Unordered list with Type attribute

We can use type attribute with <ul> tag to define the list item marker. Below are the possible options:

<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>

Example using type=”square”:

<html>
<body>
<ul type=”square”>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li> Banana</li>
</ul>
</body&gt
</html>;

Output:
list

Example using type=”disc”:

<html>
<body>
<ul type=”disc”>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li> Banana</li>
</ul>
</body>
</html>

Output:
list

Example using type=”circle”:

<html>
<body>
<ul type=”circle”>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
<li> Banana</li>
</ul>
</body>
</html>

Output:
list

Definition Lists

Definition lists use to arrange the items, way as they are arranged in a dictionary. In definition list <dl> tag is used to start the list, <dt> is for definition title and <dd> for definition description.

Example:

<html>
<title>Definition list</title>
<body>
<dl>
<dt>Computer</dt>
<dd>Computer is an electronic device.</dd>
<dt>Keyboard</dt>
<dd>Keyboard is an input device.</dd>
</dl>
</body>
</html>

Output:
list

Leave a Reply