HTML Ordered And Unordered List

 

Hey Guys welcome back to another blog of techera ,In this blog you will be able to learn about the type of list tags that can be used in a html webpage,while creating menu items in our website we use these list.

Below are the list tags that can be used by us on our webpage:

1. Ordered list
2. Un-ordered List
3. Description List

Now We Will Discuss Each And Every Listing Tag In Brief:

• Ordered List: While using <ol> tags the items are in a sequence manner.They can be written as numbered list or albhabet list or can be in Roman list .An ordered list can be created with the <ol> tag and each list item can be created with the <li> tag as in the example below:

Example 1

<ol>

<li>Item No 001</li>

<li>Item No 002</li>

<li>Item No 003</li>

</ol>

This will produce a output as numbered list :

1. Item No 001

2. Item No 002

3. Item No 003

Example 2

<ol start="A">

<li>Item No 001</li>

<li>Item No 002</li>

<li>Item No 003</li>

</ol>

This will produce a output as Alphabetical  list:

A.Item No 001

B.Item No 002

C.Item No 003

Example 3

<ol start="I">

<li>Item No 001</li>

<li>Item No 002</li>

<li>Item No 003</li>

</ol>

This will produce a output as Roman list:

I.Item No 001

II.Item No 002

III.Item No 003

• Un-Ordered List: While using <ul> tags the items are not  in a sequence manner.They can be written as bullet  list  .An un-ordered list can be created with the <ol> tag and each list item can be created with the <li> tag as in the example below:


Example 
<ul>
<li>Item No 001</li>
<li>Item No 002</li>
<li>Item No 003</li>
</ul>


This will produce a output as bullet list :


• Item No 001
• Item No 002
• Item No 003

• Description List: While using <dl> tags a  description list  can be made with the dl tag/element. It consists of name value groups, where the name is given in the dt element, and the value is given in the dd element. 

Example 

<dl>

        <dt>

            Name

        </dt>

        <dd>

            My Name Is Sudarshan Pandey

        </dd>

    </dl>

    

This will produce a output as description list :

Name

 My Name Is Sudarshan Pandey

Watch The Below Video Tutorial