HTML List
By Tony
2.19.2024
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:
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:
2. Ordered List
Here is some code of an ordered list example:
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).
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:
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.
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.