HTML Lists |Beginner HTML

This is a guide on creating lists in html

Introduction

This guide will enumerate on html lists. Html lists are created to form a group for similar set of items.

There are two types of lists in HTML, namely, ordered and unordered lists. In the below sections, we will learn the differences between the two types of lists in detail.

Photo by Marissa Grootes on Unsplash

Unordered Lists

An Unordered list is a list of items in which each of the items is held with a bullet point by default. Let's consider an example of an unordered html list below:

• Mary John

• Peter Smith

• Wolf Gung

  Code for unordered html list:

  <ul>

  <li>Mary John</li>

  <li>Peter Smith</li>

  <li>Wolf Gung</li>

  </ul>

  Code Explanation

  As you understand from the tag itself , ul stands for unordered list and for every unordered list, we have a pair of open <ul> and closed </ul> tags respectively and they are referred to ss the list tags. nested within the list tags are the item tags , open list item tag ,<li> and closed list item tag, </li> respectively. Hence, as shown above, every individual item is nested within a pair of open and closed list item tags, that is <li> and </li>

  and every pair of list item tags are nested within an open and closed list tag, in this case, an unordered list tag <ul> and </ul>

Ordered Lists

An Unordered List is a list in which items are grouped together in a list with items that are marked by numbers by default .

The ordered list uses the tag <ol></ol> where ol stands for Ordered List.

Inside the <ol></ol> tags the ordered list items are nested together using the list tags <li></li> wherein each item is nested within individual open and closed list tags.

Let's consider an example to understand the ordered lists. From the examples shown below , we observe that we can contain data with both alphabets as well as numbers within the Ordered Lists.

Examples of Ordered List

1. January

2. February

3. March

4. April

1. 1000

2. 5000

3. 10000

4. 25000

Code for creating Ordered List

<ol>

<li>January</li>

<li>February</li>

<li>March</li>

<li>April</li>

</ol>

<ol>

<li>1000</li>

<li>5000</li>

<li>10000</li>

<li>25000</li>

</ol>

Code Explanation

In the above Ordered list, in the outer layer we have a pair of open and closed <ol></ol> tags to create the ordered list . Next, inside this ordered list tag, we nest the items,that is ,the first item, January, again nested between a list tag, <li></li>. Next, the item February follows below January and so on until we reach the last item, April. in this case. Since the list items are nested inside the ordered list, by default. each item will be marked by numbers as shown above.

The same explanation serves for the second example of Ordered List grouping numbers as shown above.

Conclusion

We have learnt how to create Ordered Lists and Unordered Lists in HTML. The indepth explanation 👌 is descriptive enough to

understand the differences between the two types of lists. If you still don't understand, please feel free to comment in the comment section below this post. Happy coding!