HTML LIST :- Ordered List, Unordered List, Description List

What is a list?

A list is a collection of information or items such as person name, fruit name, the vegetable name that can be a well-formed and sematic way that makes a particular thing easy to find.

We must also have made a list in our life at some time, whether it is for buying fruits or vegetables, whether it is for shopping or a to-do list.

For Example

• Shopping list
• To-do list
• Checklist
• Index list

List in Html

In Html, there is three-way to specifying lists of information. A list must have contained a minimum of two or more elements on them.

Types of Html list are:- 

1. Unordered List
2. Ordered List
3. Definition List

1. Unordered List

An Unordered list is a collection of items with no special ordered means it can be created with bullet, circle, square, etc. To create an unordered list we have to use <ul> element. And to add items in a list we have to use <li> element.

Example:-

<ul>
    <li>Mango</li>
    <li>Orange</li>
    <li> Grapes</li>
<li> Banana </li>
</ul>

OUTPUT:-

THE TYPE ATTRIBUTE

You can also change the type of bullet in your list.  To change the list type we have to use type attribute in <ul> element. These are the possible option to change the type of unordered list:-

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

Example:-

<ul type = circle >
<li> Banana </li>
<li> Mango </li>
<li> Orange </li>
</ul>

OUTPUT:-

2.  Ordered List 

An ordered list is a collection of list items in a systematic manner. If you want to put your list items in an ordered manner like:- 1.2.3, A.B.C, etc then you have to use <ol> element in your list.

Example:-

<ol>
<li> Mango </li>
<li> Orange </li>
<li> Banana </li>
</ol>

OUTPUT:-

The Type Attribute of Ordered list

You can use type attributes in the ordered list to change the list numbering you like. The possible options to changes are:-

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example:-

<ol type = "A">
<li> RED </li>
<li> BlUE </li>
<li> GREEN </li>
</ol>

Output:-

The Start Attribute

You can also choose the number from which your list has been started. The start attribute specifies from which number your list start.

<ol type = "1" start = "5">    - Number starts with 5.
<ol type = "I" start = "5">    - Number starts with V.
<ol type = "i" start = "5">    - Number starts with v.
<ol type = "a" start = "5">    - Letters starts with e.
<ol type = "A" start = "5">    - Letters starts with E.

Example :- 

<ol type = "A" start = 13">
<li> RED </li>
<li> BlUE </li>
<li> GREEN </li>
</ol>

Output:-

3. Description List

A description list is a list of items that has some information or description about the items in a list. The description list is creating using <dl> element. <dl> tag define a definition list. <dt> tag define the term (name). and the <dd> tag define the each term.

Example:-

<dl>
<dt> Banana </dt>
<dd> 5 Dozen </dd>
<dt> Orange </dt>
<dd> 1 KG </dt>
<dt> Milk </dt>
<dd> 1 ltr </dd>
</dl> 

Output:-

That’s it for today guys In this article, you learned about HTML LIST. If you have any queries regarding this article you can comment on it or DM on my social media account. If you like the article you can share it with your friends or relatives.  See you in the next articles.

Thanks for visiting here

Have a Good Day.

PEOPLE ALSO READ:- HTML IMAGES :- INSERT AN IMAGE IN HTML DOCUMENT
PEOPLE ALSO READ:- HTML LINKS : ( Visited, Unvisited, Images as a Link )