Lists in HTML


The previous article you read with Taimienphi.vn to learn about tables in HTML. In the next article below, Betdownload.com will introduce you to 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:

list in html

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

Table of Contents:
1. Unordered list type in HTML
1.1. Specifies the type of the character to mark items in an unordered list
2. The ordered list style in HTML
2.1. Specifies the type of the character that marks items in the sort list
3. List of description types in HTML
4. List nested in HTML
5. Specify the order number to mark the items in the list
6. Create a horizontal list
7. Summary

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:

list in html 2

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

list in html 3

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.

list in html 4

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

list in html 5

The result will look like this:

list in html 6

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

list in html 7

The result will look like this:

list in html 8

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

list in html 9

The result will look like this:

list in html 10

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

list in html 11

The result will look like this:

list in html 12

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:

list in html 13

The result will look like this:

list in html 14

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.

list in html 15

list in html 16

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

list in html 17

The result will look like this:

list in html 18

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

list in html 19

The result will look like this:

list in html 20

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

list in html 21

The result will look like this:

list in html 22

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

list in html 23

The result will look like this:

list in html 24

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

list in html 25

The result will look like this:

list in html 26

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:

list in html 27

The result will look like this:

list in html 28

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:

list in html 29

The result will look like this:

list in html 30

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:

list in html 31

The result will look like this:

list in html 32

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:

list in html 33

The result will look like this:

list in html 34

7. Summary

list in html 35

– 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.

.

Add a Comment

Your email address will not be published. Required fields are marked *