HTML Lists

HTML Lists

There are three ways to specify information lists in HTML. All lists must contain multiple list items. Lists can include:

Explore further in the Mytour article below to delve into the details of various types of lists in HTML.

1. Unordered List in HTML

The unordered list starts with the ul tag. Each item in the list begins with the li tag.
Items in the list are enumerated with small black circular bullets by default.
Example: Illustration of an unordered list in HTML:

The result after applying the style for an unordered list appears as follows:

1.1 Specify the character style for items in the unordered list

To specify the character style for items in the unordered list in HTML, we use the CSS list-style-type property.

Example 1: In the following example, we specify marking items in the unordered list with small black circular bullets:

The resulting output appears as follows:

Example 2: In this example, we specify marking items in the unordered list with circular characters:

The resulting output appears as follows:

Example 3: In this example, we specify marking items in the unordered list with square characters:

The resulting output appears as follows:

Example 4: In this example, we specify not using any character to mark items in the ordered list in HTML:

The resulting output appears as follows:

2. Ordered List (ol) in HTML

Ordered lists (ol) in HTML begin with the ol tag. Items in the list start with the li tag.
By default, items in the list are marked with ordinal numbers.
Example: Here is an illustration of an ordered list in HTML:

The resulting output appears as follows:

2.1 Specify the character style for items in the ordered list

To specify the character style for items in the ordered list, we use the type attribute of the ol tag.

Example 1: In this example, we specify numbering for items in the ordered list:

The resulting output appears as follows:

Example 2: In this example, we specify alphabetical characters for marking items in the ordered list:

The resulting output appears as follows:

Example 3: In this example, we specify lowercase alphabetical characters for marking items in the ordered list:

The resulting output appears as follows:

Example 4: In this example, we specify marking items in the ordered list with uppercase Roman characters:

The resulting output appears as follows:

Example 5: In this example, we specify marking items in the ordered list with lowercase Roman characters:

The resulting output appears as follows:

3. Description List in HTML

In addition to the two types of lists - unordered and ordered, HTML also supports description lists.

In a description list, each item or term is accompanied by a descriptive paragraph.

The dl tag specifies the description list, the dt tag specifies the term (name), and the dd tag describes each term.

Example: Refer to the example illustrating a description list in HTML below:

The resulting output appears as follows:

4. Nested Lists in HTML

In addition to the unordered, ordered, and description lists, HTML also supports nested lists, where one list is nested within another.

Example: Below is an example illustrating nested lists in HTML:

The resulting output appears as follows:

Note: Items in the list can contain new lists and other HTML elements such as images, links, etc.

5. Specify the Order Number for Items in the List

By default, the order number in ordered lists starts from 1. However, if you want to specify a different starting order number, you can use the start attribute.

Example: Below is an example illustrating how to specify the order number for items in the list in HTML:

The resulting output appears as follows:

6. Create a Horizontal List

We can use various CSS properties to style HTML lists. The simplest is creating a horizontal list to make a navigation menu.
Example: Below is an example illustrating how to create a navigation menu in HTML:

The resulting output appears as follows:

7. Summary

- HTML lists can be nested.
- Items in the list can contain other HTML elements.
- Use float:left or display:inline CSS properties to display lists horizontally.

This article from Mytour introduces you to lists in HTML, helping you understand and learn HTML better. In the upcoming articles, Mytour will continue to introduce you to Block Elements in HTML.