Listas de descripción

Las listas no ordenadas y ordenadas agrupan ítems sueltos. Pero hay un tipo de contenido diferente: los pares de término y descripción. Un glosario, una lista de metadatos (clave: valor), un conjunto de preguntas y respuestas. Para eso existe la lista de descripción.

Los tres elementos: `<dl>`, `<dt>`, `<dd>`

Una lista de descripción usa tres elementos:

<dl> (description list) — el contenedor de toda la lista.
<dt> (description term) — el término que se define.
<dd> (description details) — la descripción o definición del término.

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para estructurar el contenido de una página.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje para dar estilo y diseño a una página.</dd>
</dl>

HTML: Lenguaje de marcado para estructurar el contenido de una página.
CSS: Lenguaje para dar estilo y diseño a una página.

La estructura: sin envoltorios, sin `<li>`

A diferencia de <ul>/<ol>, los pares no se envuelven en ningún elemento. Los <dt> y <dd> van directamente como hijos del <dl>, en secuencia. No hay un “elemento par”. El navegador entiende que cada <dd> describe el <dt> que lo precede.

Los dos errores más comunes vienen del arrastre del modelo <ul>/<li>:

<!-- ❌ MAL: usar <li> dentro del <dl> (los <li> no van acá) -->
<dl>
  <li><dt>HTML</dt><dd>...</dd></li>
</dl>

<!-- ❌ MAL: inventar un envoltorio por par -->
<dl>
  <div class="par"><dt>HTML</dt><dd>...</dd></div>
</dl>

<!-- ✅ BIEN: <dt> y <dd> como hijos directos, en secuencia -->
<dl>
  <dt>HTML</dt>
  <dd>Lenguaje para estructurar el contenido de una página.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje para dar estilo a una página.</dd>
</dl>

Relación flexible término ↔ descripción

La estructura es flexible: un término puede tener varias descripciones, y varios términos pueden compartir una definición.

<!-- Un término con dos acepciones -->
<dl>
  <dt>Mate</dt>
  <dd>Infusión tradicional rioplatense.</dd>
  <dd>El recipiente donde se prepara esa infusión.</dd>
</dl>

<!-- Dos sinónimos con una sola definición -->
<dl>
  <dt>Auto</dt>
  <dt>Coche</dt>
  <dd>Vehículo de cuatro ruedas para transporte de personas.</dd>
</dl>

Tu turno: el starter tiene 3 términos y sus definiciones en comentarios. Creá un <dl> con un <dt> por término y un <dd> por descripción, exactamente 3 de cada uno. No uses <li> ni envoltorios. Luego hacé clic en “Comprobar”.