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
Recommend
How to get datetime data in mysql, followed by .0
The data type of MySQL is datetime. The data stor...
How to implement mysql database backup in golang
background Navicat is the best MySQL visualizatio...
How to count the number of specific characters in a file in Linux
Counting the number of a string in a file is actu...
The most common declaration merge in TS (interface merge)
Table of contents 1. Merge interface 1.1 Non-func...
Thoughts and experience sharing on interactive design of reading lists for information products
A list is defined as a form of text or chart that...
Detailed explanation of HTML table tags (suitable for beginners)
TABLE> <TR> <TD> <TH> <CA...
Util module in node.js tutorial example detailed explanation
Table of contents Starting from type judgment Str...
Docker dynamically exposes ports to containers
View the IP address of the Container docker inspe...
The whole process record of vue3 recursive component encapsulation
Table of contents Preface 1. Recursive components...
HTML table markup tutorial (43): VALIGN attribute of the table header
In the vertical direction, you can set the alignm...
my.cnf (my.ini) important parameter optimization configuration instructions
MyISAM storage engine The MyISAM storage engine i...
Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx
1 Question The company's server uses Apache, ...
mysql uses stored procedures to implement tree node acquisition method
As shown in the figure: Table Data For such a tre...
Implementation of CSS border length control function
In the past, when I needed the border length to b...
Do you know how to use mock in vue project?
Table of contents first step: The second step is ...