Teoría
Teoría

Las etiquetas dl, dt y dd: listas de descripciones

La nueva entrada habla de las «enfermedades» de quienes crean páginas web. Si sigues esta parte con atención, no te contagiarás. Cada enfermedad tiene una descripción, y algunas tienen varias. Para marcar esta información usaremos el último tipo de lista: la lista de descripciones.

Las listas de descripciones sirven para marcar preguntas y respuestas, términos y definiciones, categorías y temas. Se crean con tres etiquetas:

<dl>, de «description list», marca la lista de descripciones;
<dt>, de «description term», marca el término;
<dd>, de «description definition», marca la descripción o definición.

Las etiquetas <dt> y <dd> se escriben dentro de <dl>.

Una lista <dl> puede contener uno o varios términos, con una o varias descripciones para cada término. Por ejemplo:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado de hipertexto</dd>
  <dt>CSS</dt>
  <dd>Hojas de estilo en cascada</dd>
  <dd>Lenguaje para dar estilo a documentos HTML</dd>
</dl>

De forma predeterminada, el navegador agrega una pequeña sangría a la izquierda de las descripciones.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día cuatro. Casi me enfermo</h1> <p>Hoy descubrí que crear páginas web puede ser peligroso. Al principio, cuando todavía no tienes experiencia, es fácil contagiarte de alguna enfermedad. Estos son algunos de los peligros que te acechan:</p>  Divitis Miedo agudo a la semántica Tablofobia Rechazo de las tablas Impulso de crear tablas con div Clasitis Asignación de clases a cada etiqueta </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

ObjetivosRealizado

Después del primer párrafo de <article>, agrega una lista de descripciones <dl> que contenga todo el texto sin marcar.
Marca Divitis como término con <dt> y Miedo agudo a la semántica como descripción con <dd>.
Marca el término Tablofobia y sus dos descripciones: Rechazo de las tablas e Impulso de crear tablas con div.

Marca el término y la descripción restantes de <dl> con <dt> y <dd>.