HTML Tutorial: Definition List

<br />Original text: http://andymao.com/andy/post/104.html
Previous section : Ordered lists After I finished writing “Unordered lists” and “Ordered lists”, some people have told me that these two articles are not interesting. These two articles would be meaningless if read in a one-way manner, but the important thing about these two articles is that they require readers to add their own thinking. Ordered and unordered single labels are very simple, as long as you know how to use them, but I think the key point is not to know what the label looks like, but what kind of data is suitable for what kind of list. What kind of data is ordered and what kind of data is disordered? You should think after reading so that you can learn something and make the knowledge your own.
Definition lists have a special form and usage, and are much less commonly used than unordered lists. There are also many friends who have not started using this list, so let's break down the code of this list:
<dl>
<dt></dt>
<dd></dd>
</dl>
Looking at the code above, we can see that there is no <li> tag here. Instead, it is composed of three tags: DL, DT, and DD. Based on the appearance and the previous list, we can know that DL is a container for this list, just like a box. The difference is that this time the box contains not only a single small box of uniform standard. Instead, two different contents appear. How do we understand DT and DD? Semantically speaking, DT is the name, the title, while DD is the explanation, the content. DT and DD are both boxes. DD only explains the DT above it and cannot skip levels or explain downwards. When DT does not exist, then DD has no meaning to exist. As for whether DT must be followed by DD, I have not found any definitive literature to explain this. However, based on my understanding of definition lists, I think that if there is only DT but no DD in the data, then this cannot be a definition list and you can just use the UL unordered list. But when only one or a few in the data do not have DD, and most of them have DD, then I think this form can exist.
<dl>
<dt>Ordered list</dt>
<dt>Ordered list</dt>
<dt>Ordered list</dt>
<dt>Ordered list</dt>
</dl>
The above is obviously inappropriate. This form is an unordered list. Why do we need a definition list? It doesn't make sense semantically.
<dl>
<dt>Ordered list</dt>
<dd>An ordered list is a data form in which sequential data is organized in a list</dd>
<dt>Ordered list</dt>
<dd>An ordered list is a data form in which sequential data is organized in a list</dd>
<dt>This sentence has no explanation</dt>
<dt>Ordered list</dt>
<dd>An ordered list is a data form in which sequential data is organized in a list</dd>
</dl>
I personally think the above form is feasible. So can a DT carry multiple DDs? I also haven't found any literature to prove that this is not possible, and on some well-known websites, there are still many cases of one DT with multiple DDs. My opinion on this is that under special circumstances it is okay for a DT to carry multiple DDs, but in general I think this approach is still lacking. From an interpretive point of view, do multiple DDs indicate multiple interpretations? Or if the explanation content needs to be divided into sections, there is no need to let DD be the dog that catches mice. A DD can contain many paragraph tags. Furthermore, from the perspective of style application, multiple DDs are loose as a whole and their design is not scalable enough. For example, when we want to create an effect where clicking DT hides the corresponding DD, this multiple DD approach is not so easy to implement. Therefore, unless it is for special purposes, try not to use one DT with multiple DDs. Instead, put the content in the DD, use paragraph tags to divide the content into sections, and use ordered or unordered lists to divide the content into lists.
As I said at the beginning, the label itself is nothing special, the key is to think about how to apply it. Here is a picture to show you whether you should use a custom list. Let’s discuss it together.

<<: MySQL 8.0.22 decompression version installation tutorial (for beginners only)

>>: Table paging function implemented by Vue2.0+ElementUI+PageHelper

Detailed explanation of nodejs built-in modules

Solve the grouping error Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated in MySQL versions greater than 5.7

reason: MySQL 5.7.5 and up implements detection o...

HTML Tutorial: Definition List

Detailed explanation of nodejs built-in modules

Two ways to create SSH server aliases in Linux

Detailed tutorial on deploying Springboot or Nginx using Kubernetes

A practical tutorial on how to quickly insert tens of millions of records into MySQL

Implementation of react loop data (list)

Share CSS writing standards and order [recommended for everyone to use]

Implementing a simple calculator with javascript

Use a diagram to explain what Web2.0 is

Pure CSS to add style to select (no script) implementation

Writing Snake Game with Native JS

Recommend

How to use Nginx to prevent IP addresses from being maliciously resolved

Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox

Let you understand the deep copy of js

VUE + OPENLAYERS achieves real-time positioning function

MySQL series: redo log, undo log and binlog detailed explanation

The latest MySQL 5.7.23 installation and configuration graphic tutorial

How to delete special character file names or directories in Linux

Vue implements the operation code of clicking a button to download a file (backend Java)

Solve the grouping error Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated in MySQL versions greater than 5.7

How to use Docker-compose to build an ELK cluster

7 skills that web designers must have

Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed

Detailed explanation of MySQL multi-version concurrency control mechanism (MVCC) source code

Ubuntu View and modify mysql login name and password, install phpmyadmin

How to use partitioning to optimize MySQL data processing for billions of data