Lists

1) Ordered lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Example:

1. Coffee
2. Tea
3. Milk

The code looks like that:

This screenshot was obtained by VSCode's CodeSnap extention I have just installed.

1.1 - Ordered HTML List - The Type Attribute

Once you start typing the word "type", Emmet gives you the hints:

1.1.1) type="1" The list items will be numbered with numbers (default)

Example:

1. Coffee
2. Tea
3. Milk

1.1.2) type="A" The list items will be numbered with uppercase letters

Example:

1. Coffee
2. Tea
3. Milk

A syntax example taken from Type A:

1.1.3) type="a" The list items will be numbered with lowercase letters

Example:

1. Coffee
2. Tea
3. Milk

1.1.4) type="I" The list items will be numbered with uppercase roman numbers

Examnple:

1. Coffee
2. Tea
3. Milk

1.1.5) type="i" The list items will be numbered with lowercase roman numbers

Examnple:

1. Coffee
2. Tea
3. Milk

1.2) The start attribute:

7. If you...
8. Had stopped the list at, let's say, number 6, for instance...
9. And wish to continue from where it stopped.

The code stays this way:

2) Reversed order lists

The reversed attribute is a boolean attribute. When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).

Example:

1. Coffee
2. Tea
3. Milk

Syntax example:

3) Unordered lists

Important discovery:

The navigation bar was created in an "unordered list" that has its respective CSS style. Therefore, ALL unordered lists other than the nav bar display confused.

To avoid that I was turning all the previous pages <ul> into <ol>.

But not now. Now it's impossible because I must explain and display an unordered list as it is without any CSS styles.

So I found a solution for that at MDN Web Docs. It's called "revert", which is a CSS keyword.

But I had to apply this keyword only to this page's examples, not to the nav bar. So I created an inline class called "plainlist" in all the <ul> examples and, in the "style.css" linked file, I attributed "revert" to every CSS style given to the original <ul>.

And... IT WORKED!!! U-HUUUU!!!

The HTML code is this:

And the CSS code is that:

The HTML <ul> tag defines an unordered (bulleted) list. (Same syntax as <ol>).

Example:

• Coffee
• Tea
• Milk

4) Nested lists 1

w3-nested

• Fruit
  • Bananas
  • Apples
    • Green
    • Red
  • Pears
• Vegetables
• Meat

See how the nested list code is:

4.1) Nested lists 2

Example of programming languages:

1. Old ones
1. Clipper
2. Fortram
• Fort1
• Fort2
3. Visual Basic
4. Delphi
2. New ones
5. PHP
6. Python
7. JavaScript
8. Kotlin

Just to show the feature I set the start of the "new ones" to "5", meaning the 5th letter of the sequence.

And I invented "Fort1" and "Fort2" just to show you that the unordered nesting cause a progressive indentation. Like the fruits in "nested lists 1" above.

5) Description lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list

The <dt> tag defines the term (name)

And the <dd> tag describes each term:

Example (I've set a 100px margin left to indent the whole example):

Coffee

A black hot drink

Milk

A white cold drink

Syntax example:

Note that the example is not indented because the code is indented. It's because of the 100px margin I have set.