Web Basis 101 #1 | HTML course

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</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
    • 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.