Lists in HTML

There are two type of Lists in HTML. Ordered and Unordered List. In this article, we will implement both the lists. Ordered list items use numbers and unordered list items use bullets.

You can even nest the elements of the list. Below is the example of unordered list that also shows nesting. For unordered list, we will use <ul> tag. And for displaying the items in the list we will use <li> tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" 
     content = "width = device-width,initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content ="ie=edge" />
    <title>Lists</title>
  </head>
  <body>
    <p>Ordered List</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <p>Nested Unordered List</p>
    <ul>
      <li>Item 1
        <ul>
          <li>Card 4</li>
          <li>Card 5</li>
          <li>Card 6</li>
        </ul>
      </li>
      <li>Item 2
        <ul>
          <li>Card 4</li>
          <li>Card 5</li>
          <li>Card 6</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
unordered list output
unordered list output

Now we can change ul to ol for changing from unordered list to ordered list. List item tag <li> remains same. So, in the body section you can change the tags.

<p>Ordered List</p>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
    <p>Nested Unordered List</p>
    <ol>
      <li>Item 1
        <ol>
          <li>Card 4</li>
          <li>Card 5</li>
          <li>Card 6</li>
        </ol>
      </li>
      <li>Item 2
        <ol>
          <li>Card 4</li>
          <li>Card 5</li>
          <li>Card 6</li>
        </ol>
      </li>
    </ol>
ordered list output
ordered list output

Try nesting ordered list in unordered list and vice – versa.

One Reply to “Lists in HTML”

Leave a Reply

Your email address will not be published. Required fields are marked *