How to create HTML lists

There are two types of HTML lists – the ordered list and the unordered list. The unordered list will display your list with bullets while the ordered list will assign ongoing numbers to the list. Lets start with the unordered list which is used most often

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

The beginning and finishing ul-tag defines that this is an unordered list. Next we wrap each list item ind the beginning and finishing li-tags. This list contains 3 items displayed with a bullet in front of each item like this:

  • List item 1
  • List item 2
  • List item 3

Let’s take a look at the ordered list…

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

The only difference is the naming. Instead of ul we use ol. This will be the output…

  1. List item 1
  2. List item 2
  3. List item 3

  Written by: Michael from     25-08-2022     Written in: HTML tutorials


  • Molly says:

    Thankz a lot! Easy way to make lists so thiz helped me a lottt!! The explanation and examplez were really clear and easy to follow.

  • Harper says:

    This tutorial on creating HTML lists is super helpful! I’ve always struggled with organizing my content, but this guide explained everything in a clear and concise manner . The step-by-step instructions made it easy for me to follow along and implement the code correctly. I appreciate the examples provided as well, as they gave me a better understanding of how different list types can be used. Thank you for sharing this valuable resource!

  • Oliver says:

    Wow, this tutorial on creating HTML lists is a lifesaver! As a beginner in web development, I often struggle with formatting my lists properly . The step-by-step breakdown and clear explanations really helped me grasp the concept easily. I also appreciate the visuals provided, as they made it more engaging and simplified the learning process. This tutorial has definitely boosted my confidence in creating well-structured lists for my web projects. Thank you so much for sharing this valuable resource!

Leave a Reply

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