Lists in HTML

Lists in HTML

There are 3 ways to specify lists of information in HTML. All lists must contain a lot of list elements. The list may contain:

Refer to the following article of Taimienphi.vn to learn in detail the list types (list) in HTML.

1. Unordered list type in HTML

Unordered lists start with a tag ul. Each item in the list begins with a tag li.
List items are listed with small black dots by default.
For example: The following illustrates the type of unordered list in HTML:

The results returned after applying the unordered list type have the following form:

1.1 Specifies the type of character to mark items in an unordered list

To specify the type of the character to mark items in an unordered list in HTML we use the attribute CSS list-style-type.

Example 1: In the following example we specify the markup of the items in the unordered list with a black dot:

The result will look like this:

Example 2: In the example below we specify the markup of items in an unordered list with circular characters:

The result will look like this:

Example 3: In the example below we specify the markup of items in the unordered list with square characters:

The result will look like this:

Example 4: In the example below we specify no characters to mark items in an unordered list in HTML:

The result will look like this:

2. The ordered list style in HTML

The ordered list style in HTML begins with a tag ol. List items begin with a tag li.
By default, items in the list are marked with ordinal numbers.
For example: The following is an example to illustrate the type of a sorted list in HTML:

The result will look like this:

2.1 Specify the type of character to mark items in the sort list

To specify the type of the character that marks items in the sorted list, we use the attribute type of cards ol.

Example 1: In the following example we specify the markup of items in an ordered list with sequence numbers:

The result will look like this:

Example 2: In the example below we specify the highlight of items in the sorted list with uppercase letters:

The result will look like this:

Example 3: In the example below we specify the checklist of items in the sorted list with lower case letters:

The result will look like this:

Example 4: In the example below we specify the highlight of items in the sorted list with uppercase Roman characters:

The result will look like this:

Example 5: In the example below we specify the highlight of items in the sorted list with lowercase Roman characters:

The result will look like this:

3. List of description types in HTML

In addition to the two types of unordered lists and the sort list, HTML also supports descriptive lists.

In the list of description types, the items and terms will be accompanied by a description.

Card dl specify a list of description types, tags DT Specify terms (name) and tags dd describe each term.

For example: Refer to the example illustrating the type list described in HTML below:

The result will look like this:

4. List nested in HTML

In addition to the non-sorted list type, the sort list and the description type list, there are nested list types in HTML, that is, one list nested in the other.

For example: The following is an example to illustrate a list nested in HTML:

The result will look like this:

Note: List items can contain new lists and other HTML elements such as images, links, etc.

5. Specify the order number to mark the items in the list

By default, the number in the sort list starts with number 1. However, if we want to specify a number starting with any number, we can use the attribute start.

For example: The following is an example that illustrates how to specify the number to mark list items in HTML:

The result will look like this:

6. Create a horizontal list

We can use different CSS properties to style the HTML list. The simplest is to style the list horizontally to create navigation menus.
For example: The following is an example illustrating how to create a navigation menu in HTML:

The result will look like this:

7. Summary

– Lists in HTML can be nested.
– List items can contain other HTML elements.
– Use properties float: left or display: inline in CSS to display the list horizontally.

https://thuthuat.taimienphi.vn/danh-sach-list-in-html-50615n.aspx
The article above Taimienphi.vn has just introduced you to the list (list) in HTML to help you learn and learn HTML better. In the next articles, Taimienphi.vn will introduce you further Block element in HTML Please.