Creating Lists in HTML: A Learning Journey to Web Development
Welcome back to the journey again! We learned about HTML Links and Image in the last post. Today we’ll learn about another most important elements that we use a lot in our daily life. That is Lists. Just like in real life, they are used a lot on web pages. So, let’s learn how to create list in HTML.
N.B: This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join me there.
List in HTML
Describing how important list is in our life is completely unnecessary. We use it all the time. From little things like a grocery list to big things like life goals; lists always come in handy. Lists show us way, lists helps us remember things, lists helps us achieve our goals. It’s inevitable that you’ll have to create a lot of lists when creating a web page. We create lists of different types and different styles in the real world. HTML provide us functionality to mimic almost any type of list that you might image.
Types of List in HTML
HTML supports 3 main types of lists. They are
- Ordered List
- Un-Ordered List &
- Description List
Did you see that I’ve just created a list to list the type of available list? :D I told you list is important! Anyway, Take a look at my list. They have bullet point or solid dots, whatever you may call it; at the beginning of each item. They are not maintaining any specific order. That is because the order doesn’t really matter here. It wouldn’t hurt if I mentioned un-ordered list at first. And that is why it’s an unordered list.
But think about a recipe list. Recipe lists follows an order. If I bring the third item of the list on top, you are left with either a recipe that might cause damage to your relationship with your spouse Or, an unusable list. So, we must maintain order when creating such list. Take a look at this ordered list below:
Creating an Un-ordered List in HTML
The syntax in simple and easy. We use the un-ordered list ‘<ul>’ tag to mark the start and end of the list, and we use the list item ‘<li>’ tag to put all the items in the list. Let’s see an example:
<p>Animals I like: </p><ul> <li>Cats</li> <li>Dogs</li> <li>Birds</li> <li>All other animals</li></ul>
Output:
- Cats
- Dogs
- Birds
- All other animals
Un-ordered list is probably the most used list on the internet. The marking styles of items that shows up before every list item can be customized with CSS which we’ll take a look at later. There’s not much to talk about un-ordered list. You simply create the <ul> tag and put all your items in <li> tags within the <ul> tag, and that’s it.
Creating an Ordered list in HTML
An ordered list is created the same way an un-ordered list is created. Except, instead of un-ordered list tag, we use the ordered list tag ‘<ol>’ here. Check out the example below:
<p>Easiest recipe in the world: </p><ol> <li>Put eggs in the saucepan</li> <li>Cover the eggs with at-least an inch of water</li> <li>Put the saucepan on the stove</li> <li>Heat it for 10 minutes</li></ol><p>Congratulations! You have an edible boiled egg!</p>
Output:
Easiest recipe in the world:
- Put eggs in the saucepan
- Cover the eggs with at-least an inch of water
- Put the saucepan on the stove
- Heat it for 10 minutes
Congratulations! You have an edible boiled egg!
As you can see, it’s exactly the same as unordered list. But ordered list has some special attributes which can be used to customize the behavior of the list. Let’s discuss them briefly.
The Attributes
The first one is the start attribute. It sits with the <ol> tag and defines the number that the list should start from. If you put start=”9”, the list will start from 9 instead of starting from 1.
The type attribute defines the type of notation to be used. An ordered list can be created with numbers, letters, roman numbers etc. The possible values of the type attribute are: 1, A, a, I, i which respectively means numbers, Uppercase Letter, Lowercase Letter, Uppercase Roman number, Lower Case Roman numbers.
The reversed attribute reverse the order of the list. If you use the reversed attribute on an ordered list, the list will start from the highest number to lowest number instead of lowest to highest.
The value attribute sits with <li> tag. List items are numbered automatically based on their position. But if you need to change that number for any reason, you use the value attribute. All the list items that come after the list item with a value attribute are calculated accordingly.
Check out the code pen below this post where I’ve demonstrated the use of all these attributes.
Creating a Description List in HTML
The last type of list HTML offers is description lists. Though it’s an useful one, but the use case of this is much much lower than ordered and un-ordered lists. A description list can be created using the description list ‘<dl>’ tag. And instead of ‘<li>’ tags, two tag, description term <dt> and description <dd> tag is used to create a descriptive list. As all the description generally have two parts, the name of the term to be defined, and the description itself, it is not possible to use the <li> tag in the description list. Check out the code pen for demonstration.
List Nesting
One great feature that makes HTML listing extremely powerful is the ability to nest one list inside another one. We can create versatile lists with an ordered list inside of an unordered list or vice versa.
The below codepen demonstrates all the things I’ve discussed in this post. Take a look and try to understand the way they’re working together.
Play with the code. Change stuff here and there and see what happens. I’ve used all the attribute individually on lists. What would happen if you applied two attributes on same list? Try it yourself and let me know what happens. That is the best way to learn.
Conclusion
That is pretty much everything about creating List in HTML. The most important part about list is styling these lists to suit your needs. We will cover that once we reach the CSS section.
Feel free to leave a comment if you have any confusion or questions. And please share this post on your social network so that I can reach more people who would want to embark on this learning journey.
We’ll learn about HTML tables in the next post. Till then, Keep mistaking and I’ll see you soon! :)
