Welcome to the fourth course,
We are slowly starting to grasp the basic architecture of a web page with all various components. We are not webmasters yet but we are getting there!
Today we’ll take a closer look at order and unordered list. Everyone knows that you can use list to display a list of element on a document or on a web site, but the great advantage with the list in HTML is that we can also use them to display navigation menu and event dropdown menu (With the help of a little CSS!). They can also be used for an image light box.
To begin with, you have to know that in HTML there are two types of list; ordered list (used with the OL tag) and unordered list (used with the UL tag). Let’s take a look at two list example:
Ordered list will have a number or letter (even roman number) to define the order in which they are shown.
As for the unordered list, they have a symbol or image which will be the same for the entire list.
When you are creating a list, all the items in the list must be contained within the “li” tag. Now enough with the writing and let’s take a look at an example for the ordered list:
<ol> <li>First</il> <li> Second</il> </ol>
And here’s an unordered list example:
<ul> <li>First</il> <li>Second</il> </ul>
As you’ve probably notice, the only difference is the opening tag (Using either ul or ol).
You can also place a list within a list as follow:
<ul> <li>First</li> <li> <ul> <li>First Sub</li> <li>Second Sub</li> </ul> </li> <li>Second</li> </ul>
And this will give you a result similar to this one:
- First Sub
- Second Sub
That’s all for this course, in my next blog we will try to add a little beauty to our page! Meanwhile, here is the YouTube version of the course: