Listas de definición HTML: qué son y cómo crearlas

En este artículo te voy a contar todo lo que tienes que saber sobre las listas de definición HTML. Es el tipo de lista más especial. Y también el que menos se utiliza. Sin embargo, resulta muy útil a la hora de explicar el significado de conceptos y palabras en tu web en lenguaje HTML.

¡Arrancamos la nave!

Listas de definición HTML: concepto

En realidad, las listas de definición son un tipo de listas desordenadas. Sin embargo, están destinadas directamente a hablar sobre el significado de una palabra en concreto.

Las listas de definición se dividen en dos partes:

• Elemento. Se señala con la etiqueta <dt> (Definition Term).
• Definición. Se señala con la etiqueta <dd> (Definition Definition).

Con este tipo de listas, será muy fácil interpretar los ítems de la lista. Además, cuando la utilicemos, aplicaremos una buena semántica a nuestro texto HTML, ya que asociaremos el concepto con su definición. Es la única manera de hacerlo.

Crear listas de definición en HTML

Crear una lista de definición HTML es muy fácil. Primero, es necesario utilizar la etiqueta <dl> (Definition List). Tras esta etiqueta, deberemos enumerar los elementos (<dt>) y las definiciones (<dd>), siempre cerrando las etiquetas después de cada texto.

Finalmente, hay que cerrar la lista de definición con </dl>, al igual que los otros tipos de listas.

Ejemplos de listas con código

Para que la explicación anterior quede más clara, aquí te dejo un ejemplo de lista de definición HTML con su código:

<dl> 
   	<dt>Nave espacial</dt>
   	    <dd>Vehículo o máquina diseñada para volar en el espacio exterior</dt>
   	<dt>Extraterrestre</dt>
   	    <dd>Todo ser vivo originario de cualquier sitio ajeno a la Tierra.</dt>
</dl>

Para realizar listas de definición HTML diferentes, puedes utilizar las listas anidadas también para definir conceptos, como te enseño en este ejemplo:

<ol>
    <li>Planetas
        <dl>
            <dt>Tierra</dt>
                <dd>La Tierra es un planeta que gira alrededor del Sol— en la 
                    tercera órbita más interna.</dd>
            <dt>Saturno</dt>
                <dd>El sexto planeta más próximo al Sol, caracterizado por sus  
                    anillos visibles.</dd>
        </dl>
    </li>
    <li>Satélites
        <dl>
            <dt>Luna</dt>
                <dd>Es el único satélite natural de la Tierra</dd>
            <dt>Cordelia</dt>
                <dd>Es el más cercano satélite natural de Urano.</dd>
        </dl>
    </li>
</ol>

Puedes copiar cualquiera de estos códigos y modificarlos con las definiciones que desees aplicar en tu web.

Este artículo habla solo de las listas de definición HTML. Pero si quieres saber más sobre otros tipos de listas HTML, como las listas ordenadas, no dudes en seguir viajando por nuestra web.

¡Hasta el próximo viaje!