Learn about HTML lists

Hello Peeps,

Do you understand what a list is? In this blog post, let's discover more about them.

Let's first define a list: A list displays a collection of information. It is represented by <li> for an open tag and </li> for a close tag.

There are three types of lists in HTML:

1. Ordered list (<ol>)
2. Unordered list (<ul>)
3. Definition or Description list (<dl>)

1. <ol>- It shows the ordered collection. Ordered lists can be represented in five ways.
   • type= "1" (Numbers - they are by default)
   • type= "A" (Uppercase letters)
   • type= "a" (Lowercase letters)
   • type= "I" (Uppercase roman numbers)
   • type= "i" (Lowercase roman numbers)

Look at the examples below:

Numbers

Input

<ol type="1">
    <li>Apple</li>
    <li>Mango</li>
    <li>Banana</li>
    <li>Orange</li>
</ol>

Output

1. Apple
2. Mango
3. Banana
4. Orange

Uppercase Letters

Input

 <ol type="A">
     <li>Apple</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Orange</li>
 </ol>

Output

A. Apple

B. Mango

C. Banana

D. Orange

Lowercase letters

Input

<ol type="a">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ol>

Output

a. Apple

b. Mango

c. Banana

d. Orange

Uppercase roman numbers

Input

<ol type="I">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ol>

Output

I. Apple

II. Mango

III. Banana

IV. Orange

Lowercase roman numbers

Input

<ol type="i">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ol>

Output

i. Apple

ii. Mango

iii. Banana

iv. Orange

1. <ul>- It shows the unordered collection. Unordered lists can be represented in 4 ways.

   • type= "disc" (By default method. It represents in the form of bullets.)
   • type= "circle" (It sets the item to circle)
   • type= "square" (It sets the item to square)
   • type= "none" (It has nothing)

   Look at the examples below to make a clear and better understanding:

Disc

Input

<ul style="list-style-type: disc;">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

Output

• Apple
• Mango
• Banana
• Orange

Circle

Input

<ul style="list-style-type: circle;">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

Output

◌ Apple

◌ Mango

◌ Banana

◌ Orange

Square

Input

<ul style="list-style-type: square;">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

Output

⌑ Apple

⌑ Mango

⌑ Banana

⌑ Orange

None

Input

<ul style="list-style-type: none;">
        <li>Apple</li>
        <li>Mango</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

Output

Apple

Mango

Banana

Orange

1. <dl>- It gives the description of each item in a list.

   <dt>- It gives the item name and <dd> gives the detail of the item.

Look at the example below:

Input

<dl>
    <dt>Apple</dt>
    <dd>2 kg</dd>
    <dt>Mango</dt>
    <dd>5 kg</dd>
</dl>

Output

Apple

2 kg

Mango

5 kg

Conclusion: In today's blog, we've learned about lists. Stay tuned to know more about HTML.