HTML lists: definition lists

We look at definition lists and learn how to nest lists to create more complex list structures.

We finished the subject of lists in .com studying definition lists. We will also see the nesting of lists, which will be an interesting resource for structuring slightly more complex data or listing elements with a hierarchy.

definition lists

Definition lists are used to make a set of elements with concept-description pairs. That is, several terms will be specified by name and a definition will be written for each one. Each element is presented along with its definition, one after the other.

Note: These types of lists are not really used much. It is a good resource, because it allows semantics to be applied to the items of a list, which are associated with their definition, so using them will not be a bad idea, however almost nobody uses them in practice.

To make a definition list, the main tag is DL and its closure (definition list). The element labels and their definition are DT (definition term) and DD (definition term) respectively.

Here we propose a code that can clarify this system:

Dictionary of the Royal Academy

Compass

Señorula mounted on a brush

Oreja

Sixty minutes

The effect produced:

Notice that each DD line is shifted to the left. These types of tags are often used for the purpose of creating texts that are more or less shifted to the left.

The code:

First scroll level

Second scroll level

Third scroll level

The result:

nesting lists

Nothing prevents us from using all these tags in a nested way as we have seen in other cases. In this way, we can get mixed lists such as:

Cities of the world

• Argentina
  1. Buenos Aires
  2. Bariloche
• Uruguay
  1. Montevideo
  2. Punta del Este

In this way we create a list like this: