HTML ol, li and ul elements explained

If you are trying to create a list using HTML you will need to know how you want the layout to look. A little preplanning goes along way when building a webpage. I'm going to go over 3 types of Lists: <ol>, <li>, <ul> and <dl>, <dt> and <dd>. You need to think of the ending output in order to construct it from the beginning.

An <ol> is what's called an Ordered List. Inside the <ol> are a group of <li>'s. The <li> items will occupy one line of (words) items. Then the next <li> will be on the next line, etc...These list items will be preceded by a number. So by using both <ol> and a list of <li> will create a list like looks like this:

Code:
<ol>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>

That will produce:

1. This is the first item
2. This is the second item
3. This is the third item

The <ul> is the Unordered List. Unordered Lists are preceded by a bullet point. Here is an example of that:

Code:
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>

That will produce:

•This is the first item
•This is the second item
•This is the third item

So this is how to create Ordered Lists, List Items and Unordered Lists. Next time I will go over <dl>, <dt> and <dd>. Happy Coding!

Comments

[Andrew Bone]

Hey, nice post 😊

When writing multi-line code blocks you can use three back ticks then the language to get a nice code block. Like this.