Lists

In HTML we have two kinds of lists, ordered and unordered. The difference being that the ordered use numbers, while the unordered uses bullets. You create a list by writing the opening and closing tags, and inside them you write your list elements <li>List element</li>. The list element tag is common for ordered and unordered lists.

An ordered list is enclosed in the <ol></ol> element. You write an ordered list as such:

<ol>
    <li>List element</li>
    <li>List elementer</li>
    <li>Even list elementer</li>
    <li>List elementest</li>
</ol>

... which gives the following output:

1. List element

2. List elementer

3. Even list elementer

4. List elementest

The unordered list is enclosed in the <ul></ul> element. You write an unordered list as such:

<ul>
    <li>List element</li>
    <li>List elementer</li>
    <li>Even list elementer</li>
    <li>List elementest</li>
</ul>

... which gives the following output:

• List element

• List elementer

• Even list elementer

• List elementest

You can also have a nested list, both in ordered and unordered lists. To do this you create another list within a list element. E.g. for an ordered list you will write:

<ol>
  <li>List element</li>
  <li>List within a list
    <ol>
      <li>Look at this list</li>
      <li>It is within another list</li>
    </ol>
  </li>
  <li>I'm just a regular list element</li>
</ol>

This will give:

1. List element

2. List within a list

   1. Look at this list

   2. It is within another list

3. I'm just a regular list element

Notice how "List within a list" have a opening tag in front of it, but not a closing tag after it. That is because the list element is closed after the sublist is written.

You can change <ol> to <ul> to get an unordered list. You can also mix list types, just remember to open and close with the same tags.