Listas de descripción: dl, dt y dd
Marque pares de términos y definiciones con listas de descripción.
Listas de descripción: dl, dt y dd es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es una lista de descripciones?
Una lista de descripciones agrupa términos con sus descripciones:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation of the web.</dd>
<dt>JavaScript</dt>
<dd>The programming language of the web.</dd>
</dl>Los elementos dl, dt y dd
Tres elementos forman una lista de descripciones:
<dl>: contenedor de la lista de descripciones<dt>: término de descripción (la clave)<dd>: detalles de la descripción (el valor)
Varios dd por cada dt
Un término puede tener varias descripciones:
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language.</dd>
<dd>First published as HTML 2.0 in 1995.</dd>
<dd>Current version: HTML5 (Living Standard).</dd>
</dl>Varios dt por cada dd
Varios términos pueden compartir una descripción (sinónimos, alias):
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>Casos de uso reales
Las listas de descripciones son perfectas para:
- Glosarios y definiciones
- Secciones de preguntas frecuentes (pregunta → respuesta)
- Metadatos de productos (Autor: Jane, Publicado: 2024)
- Detalles de recetas (Tiempo de preparación: 10 min, Porciones: 4)
- Documentación de parámetros de API
Preguntas frecuentes con dl
Construya una sección de preguntas frecuentes con listas de descripciones:
<dl class="faq">
<dt>Is HTML a programming language?</dt>
<dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>
<dt>Do I need to close void elements?</dt>
<dd>In HTML5, void elements like <img> and <br> do not need a closing slash.</dd>
</dl>dl para metadatos
Muestre los metadatos de un artículo o producto:
<article>
<h1>Responsive Images Guide</h1>
<dl class="metadata">
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd><time datetime="2024-03-15">March 15, 2024</time></dd>
<dt>Reading time</dt>
<dd>8 minutes</dd>
</dl>
</article>Aplicar estilos a dl
Aplique estilos a las listas de descripciones con CSS:
/* Two-column layout */
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25rem 1rem;
}
dt {
font-weight: bold;
color: #555;
}
dd {
margin: 0; /* Remove browser default dd margin */
}Anidamiento de dl
Las listas de descripciones se pueden anidar para crear definiciones jerárquicas:
<dl>
<dt>HTML Elements</dt>
<dd>
<dl>
<dt>Block elements</dt>
<dd>Take full width: div, p, h1-h6</dd>
<dt>Inline elements</dt>
<dd>Flow with text: span, a, strong</dd>
</dl>
</dd>
</dl>dl frente a table para datos clave-valor
Cuándo usar <dl> frente a <table> para datos clave-valor:
- dl: asociaciones entre términos y descripciones (pares nombre-valor)
- table: datos tabulares con filas y columnas (varios atributos por elemento)
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->Divs dentro de dl
Envolver grupos de dt/dd en <div> dentro de <dl> es HTML5 válido:
<dl>
<div>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Styling language for web pages.</dd>
</div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->Comprobación rápida
¿Qué elemento contiene la definición o el valor en una lista de descripciones?
Repaso: listas de descripciones
Aspectos esenciales de las listas de descripciones:
<dl>: contenedor de la lista de descripciones<dt>: término (clave, pregunta, nombre)<dd>: descripción (valor, respuesta, definición)- Un dt puede tener varios dd; varios dt pueden compartir un dd
- Son perfectas para glosarios, preguntas frecuentes y metadatos
- Envuelva los grupos en
<div>para disponer de mayor flexibilidad al aplicar estilos
Preguntas frecuentes
¿La lección «Listas de descripción: dl, dt y dd» es gratis?
Sí — el texto completo de «Listas de descripción: dl, dt y dd» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Listas de descripción: dl, dt y dd»?
Marque pares de términos y definiciones con listas de descripción. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Listas de descripción: dl, dt y dd»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Listas no ordenadas: ul y li
- Listas ordenadas: ol, start, reversed y type
- Listas de descripción: dl, dt y dd
- Listas anidadas y estilos de listas