HTML List

By Tony 2023.3.4

Lists are very common and important. This article will tell you how to create lists in HTML.

1. Unordered List

Here is some code of an unordered list example:

<h1>My Shopping List</h1>
<ul>
www<li>Food</li>
www<li>Toys</li>
www<li>Shirts</li>
</ul>

We created a heading and typed the <ul> tags. These tags tell browser the elements wrapped inside them are parts of an unordered list. To define the list items, we typed 3 <li></li> pairs.
This is the output of the code:

My Shopping List

• Food
• Toys
• Shirts

2. Ordered List

Here is some code of an ordered list example:

<h1>How To Learn Coding</h1>
<ol>
cpc<li>Go to MacLearn.</li>
cpc<li>Take some time to learn and practice.</li>
cpc<li>Practice some more.</li>
cpc<li>And your done!</li>
</ol>

The code above is same as the unordered list example, except we changed the <ul> tags to the <ol> tags which mean ordered list.
This is the output of the code:

How to learn coding

1. Go to MacLearn.
2. Take some time to learn and practice.
3. Practice some more.
4. And your done!

Always remember to put <li></li> tags inside <ol></ol> tags or it won't work! These tags are very helpful when listing steps to do something on your webpage. You can style it, give it a title, assign it an id or a class, or do whatever you want with it. Have fun exploring <ol></ol> tags!

Bonus: How to change the label before a list item?

Maybe you want a square before <ul> list item instead of a circle, or you want alphabat-ordered items instead of number-ordered items in <ol> tags. You can do this by styling the <ul> or <ol> tags.
Here is how you do it in HTML:

<h1>Styling ul Tags</h1>
<ul style="list-style-type: square;">
cpc<li>An item.</li>
cpc<li>Another item.</li>
cpc<li>The last item.</li>
</ul>

The structure is still same , but we added a style attribute on the <ul> tag in order to style the label. Type "list-style-type" so you can choose any label avaliable in HTML5. We used square, but there are none, circle, decimal (number), alpha (alphabet), and many more choices you can explore. Styling ordered list is exactly the same, no difference.
This is the output:

Styling ul Tags

• An item.
• Another item.
• The last item.

Summary

List tags are very important and useful. They are <ul> tags which means unordered list; <ol> tags which means ordered list; and <li> tags which wrap up list items and can be put inside <ul> tags or <ol> tags. To style the label of a list item, use styling method and type "list-style-type" to choose any avaliable labels.

Always remember to put <li></li> tags inside <ul></ul> tags when creating an unordered list.