Submodule 2.1: Comments and Lists

Comments

Comments are used in HTML when we want to remind ourselves something or we want to explain to others what we did.
Comments are not visible on the page.
The comment tag starts with <!-- and ends with -->.

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

2000. the 1st year of the 21st century
2001. the 2nd year of the 21st century
2002. the 3rd year of the 21st century
2003. the 4th year of the 21st century

View source:

This ordered list is reversed

2099. the last year of 21st century
2100. two years until the end of the 21st century
2101. three years until the end of the 21st century
2102. 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: