Web Basic 101 – HTML List

Welcome to the fourth course, today we will insert some list in our web page.

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:

Unordered List

As for the unordered list, they have a symbol or image which will be the same for the entire list.

• First
• Second

Ordered List

Ordered list will have a number or letter (even roman number) to define the order in which they are shown.

1. First
2. Second

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</li>
 <li>Second</li>
</ol>

And here’s an unordered list example:

<ul>
 <li>First</li>
 <li>Second</li>
</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
  • First Sub
  • Second Sub
• Second

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.