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.

15 Replies to “Lists in HTML”

  1. I am the proprietor of JustCBD Store brand (justcbdstore.com) and am planning to grow my wholesale side of company. It would be great if anybody at targetdomain is able to provide some guidance ! I thought that the most suitable way to do this would be to talk to vape stores and cbd retailers. I was hoping if anybody at all could recommend a trusted web-site where I can purchase CBD Shops B2B Marketing List I am already looking at creativebeartech.com, theeliquidboutique.co.uk and wowitloveithaveit.com. Not exactly sure which one would be the most suitable option and would appreciate any assistance on this. Or would it be simpler for me to scrape my own leads? Suggestions?

  2. I’m the proprietor of JustCBD Store label (justcbdstore.com) and I am currently planning to expand my wholesale side of company. It would be great if anybody at targetdomain share some guidance . I considered that the very best way to accomplish this would be to connect to vape shops and cbd retailers. I was hoping if anybody at all could recommend a reputable web site where I can buy CBD Shops B2B Data List I am presently considering creativebeartech.com, theeliquidboutique.co.uk and wowitloveithaveit.com. Not sure which one would be the most suitable selection and would appreciate any advice on this. Or would it be simpler for me to scrape my own leads? Suggestions?

  3. I’m impressed, I have to admit. Rarely do I encounter a blog that’s both equally educative and amusing, and let me tell you, you have hit the nail on the head. The issue is something too few men and women are speaking intelligently about. I’m very happy that I stumbled across this during my hunt for something concerning this.

Leave a Reply

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