HTML List

By Tony 2023.3.4 • Last updated 2024.1.25

Lists are very common and important when showing steps, listing tips, and more. This article will tell you how to create lists in HTML.

1. Unordered List

Here is some HTML 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 the browser the elements wrapped inside them are parts of an unordered list (bulleted). To define the list items, we typed 3 <li></li> pairs, with the item text inside them.
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 you're done!</li>
</ol>

The code above is the same as the unordered list example, except we changed the <ul> tags to the <ol> tags so the browser knows that you want to create an ordered list (numbered). 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 you're 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: Changing the Label Before a List Item

Maybe you want a square before an <ul> list item instead of a circle, or you want alphabet-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 the same, but we added a style attribute on the <ul> tag in order to style the labels of the list items. 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 with styling unordered list.
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 both <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.