How to add a list in html

problem

You’re learning HTML and wish to place some information on your webpage as a list, either bullet point or numbered list. In this post we will see how to do that.

SOLUTION

Using the <ul> tag or the <ol> tag. Both of the tags have opening and closing tags. Moreover we need to use the <li> tag (nested) for each list item.

Let’s see examples.

Unordered list example

list.html

				
					<ul>

</ul>

The code above will create an unordered list (ul). In order to show some items we need to place them using the list item <li> tag. For example:

list.html

				
					<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

As you can see the <li> tag has an opening and a closing tag. It’s used as a nested tag inside the <ul> tag.

output

Ordered list example

list.html

				
					<ol>

</ol>

The code above will create an ordered list (ol). The opposite of an unordered list (ul). Again, we can place list items by using the <li> tag.

list.html

				
					<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

This tag automatically puts a number next to each list item instead of a bullet point. The number starts from 1 and increments by 1.

output

conclusion

In this post we saw how to use the <ul> for unordered list (bullet points) and the <ol> for ordered list (numbered points). Also, we’ve seen how to utilize the <li> tag to insert each list item in the list. The <ul> and <ol> can be nested and have sublists if you wish.

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged user-input

0 0 votes

Article Rating