1. What is a list label?
What is an HTML list? Table content is a form of displaying text or graphics in a container, which is called a list. The biggest feature of a list is that it is neat, tidy and orderly.
The role of the list tag: Add list semantics to a bunch of data, that is, tell the search engine/browser that this bunch of data is a whole.
2. List label classification
HTML lists are divided into ordered, unordered and defined lists:
(1) Ordered list, use <ol> + <li> tags
(2) Unordered list, use <ul> + <li> tags
(3) Define the list using <dl> + <dt> + <dd> tags
1. Unordered list
An unordered list is a list of items marked with bold dots (typically small black circles).
Unordered list starts with <ul> tag. Each list item starts with <li>.
<html><body><!--An unordered list: --><ul><li>Coffee</li><li>Milk</li><li>Green tea</li><li>Coke< /li><li>Yoghurt</li></ul></body></html>
The final result presented is as follows:
Unordered lists require the use of <ul> and <li> tags:
(1) <ul> is the abbreviation of unordered list, which means an unordered list.
(2) <ul> is the same as <li> in <ol>, indicating each item in the list. By default, each item in an unordered list is represented by ● symbol.
Note: <ul> is generally used in conjunction with <li> and will not appear alone. It is not recommended to use other tags other than <li> directly in <ul>.
2. Ordered list
An ordered list is also a list of items, and the list items are labeled with numbers.
An ordered list starts with the <ol> tag. Each list item begins with a <li> tag.
<html><body><!--An ordered list: --><ol><li>Coffee</li><li>Milk</li><li>Green tea</li><li>Coke< /li><li>Yoghurt</li></ol></body></html>
The final result presented is as follows:
Ordered lists require the use of <ol> and <li> tags:
(1) <ol> is the abbreviation of order list, which means an ordered list. It can number each item in the list, starting from the number 1 by default.
(3) <li> is the abbreviation of list item, which represents each item in the list. The number of <li>s in <ol> indicates how many pieces of content there are. List items can contain text, images, links, etc., or even another list.
Note: <ol> is generally used in conjunction with <li> and will not appear alone. It is not recommended to use other tags other than <li> directly in <ol>.
3. Definition list
A custom list is not just a list of items, but a combination of items and their comments.
Custom lists start with a <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item begins with <dd>.
<html><body><!--An ordered list: --><dl><dt>Coffee</dt><dd>Hot drinks</dd><dt>Milk</dt><dd>Cold drinks< /dd></dl></body></html>
The final result presented is as follows:
Defining lists requires the <dl>, <dt> and <dd> tags:
(1) <dl> is the abbreviation of definition list, which means definition list.
(2) <dt> is the abbreviation of definition term, which means the definition term, which is what we call the title.
(3) <dd> is the abbreviation of definition description, which means definition description.
It can be considered that <dt> defines a concept (term), and <dd> is used to explain the concept (term).
Note: <dt> and <dd> are sibling tags, and they are both sub-tags of <dl>. Generally, each <dt> is paired with a <dd>, and a <dl> can contain multiple pairs of <dt> and <dd>.
Summary: list tags