How to work with List in HTML

In this article I will explain how to add the ordered list and unordered list in HTML..
  • 2017

Unordered (Un Numbered) List

Unordered list is one which have no numbers.For this <ul> tag is used and for adding the list items in the unorderd list we have to use <li> tag.here <ul> stands for unordered list and <li> stands for list item.Here is the example.

<html>

<head>

    <title>HTML Example</title>

</head>

<body>

    <ul>

        <li>Computer</li>

        <li>Monitor</li>

        <li>Keyboard</li>

        <li>Mouse</li>

    </ul>

</body>

</html>

 

Output

  • Computer
  • Monitor
  • Keyboard
  • Mouse

Here the unordered list is coming in bullets.We can change the type of bullet as well.Here is the example of it:

<html>
<head>
   <title></title>
</head>
<body>
    <ul type="circle">
        <li>grapes</li>
        <li>mango</li>
        <li>orange</li>
    </ul>
</body>
</html>


Output
  • grapes
  • mango
  • orange

In the above ouput we have used circle bullet.

Ordered (Numbered) List

Ordered list is one which have  numbers.For example

<html>

<head>

    <title>HTML Example</title>

</head>

<body>

    <ol>

        <li>Computer</li>

        <li>Monitor</li>

        <li>Keyboard</li>

        <li>Mouse</li>

    </ol>

</body>

</html>

 

Output

  1. Computer
  2. Monitor
  3. Keyboard
  4. Mouse

We can also put the alphabetic letters in place of number in the ordered list.Here is the example.

<html>
<head>
    <title></title>
</head>
<body>
    <ol type="A">
        <li>grapes</li>
        <li>mango</li>
        <li>orange</li>
    </ol>
</body>
</html>

 

Output

  1. grapes
  2. mango
  3. orange

In the above example ordered list is coming Alphabetically.

Ask Your Question 

Got a programming related question? You may want to post your question here
 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.