Creating Lists

By Tony 2023.3.3

Lists are everywhere. Shopping lists, to-do lists, menu lists... You can also make unordered lists or number-ordered lists on your webpage. This article will tell you how to do this 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>

At the first line, we created a heading called "My Shopping List".
At the second line, we typed <ul></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 with food, toys, or shirts inside them.
This is the output of the code:

My Shopping List

  • Food
  • Toys
  • Shirts

Always remember to put <li></li> tags inside <ul></ul> tags when creating an unordered list. These tags are very helpful when organizing things 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 <ul></ul> tags!

2. Ordered List

Here is some code of an ordered list example:

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

At the first line, we created a heading called "How To Learn Coding".
At the second line, we typed <ol></ol> tags. They tell browser the elements wrapped inside them are parts of an number-ordered list.
To define the list items, we did the same thing as <ul></ul> tags:
<li></li> pairs.
This is the output of the code:

How to learn coding

  1. Go to Coding Place.
  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.

Back Next