Previous

Lists

In HTML there are two types of lists <ul> and <ol.

<ul> stands for unordered list, which is the classical list with bullet points.

<ol> stands for ordered list in which its items are marked with numbers.

Each item of both lists starts with <li> tag, which stands for list item, and ends with </li>.

By default a <ol> will start counting from 1. 

However, we are able to change the start point, reverse the counting or even use alphabetical characters.

Examples

Unordered list

  • The first item
  • The second item...
  • The third item!

View source:

Ordered list

  1. The 1st item
  2. The 2nd item...
  3. The 3rd item!
  4. The 4th item!

View source:

This ordered list starts from 2000

  1. the 1st year of the 21st century
  2. the 2nd year of the 21st century
  3. the 3rd year of the 21st century
  4. the 4th year of the 21st century

View source:

This ordered list is reversed

  1. the last year of 21st century
  2. two years until the end of the 21st century
  3. three years until the end of the 21st century
  4. four years until the end of the 21st century

View source:

Nested list

  1. Coffee
  2. Tea
    • Black tea
    • Green tea
  3. Milk

View source:


You can find more examples of Lists on w3schools 

Exercise

  1. Open your editor, create a new file and save it as exersice02.1.02.html in the folder "Exercises"
  2. Modify the file. The browser's output should be as shown in the following image:

Solution:

Previous