Dominando las Listas de Definición en HTML

Introducción

En este laboratorio, aprenderás a usar la etiqueta HTML <dfn> para crear una lista de definiciones que destaque los términos que se definen. La etiqueta <dfn> se utiliza comúnmente en tutoriales y sitios web educativos para proporcionar una experiencia de usuario interactiva e informativa.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Configurando el archivo HTML

Crea un nuevo archivo llamado index.html y úbrelo en tu editor de código preferido.
Agrega la estructura básica de HTML a tu archivo.

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

Creando la lista de definiciones

Dentro del elemento <body>, crea un elemento <dl> para contener tu lista de definiciones.
Dentro del elemento <dl>, crea un conjunto de pares de término y definición usando los elementos <dt> y <dd> respectivamente.

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Language es el lenguaje estándar para crear páginas web.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style Sheets se utiliza para describir la presentación de un
      documento escrito en lenguaje de marcado.
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      Un lenguaje de scripting utilizado para crear y controlar el contenido
      dinámico de un sitio web.
    </dd>
  </dl>
</body>

En este ejemplo, estamos usando la etiqueta <dfn> para resaltar los términos y que se destaquen.

Agregando una información emergente

Para agregar una información emergente a cada término, incluye un atributo title dentro de los elementos <dfn>.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
  HyperText Markup Language es el lenguaje estándar para crear páginas web.
</dd>

El atributo title creará una información emergente que mostrará el término completo cuando el usuario pase el cursor sobre él con el mouse.

Personalizando el estilo CSS

Por defecto, la etiqueta <dfn> tiene un estilo de fuente en cursiva. Sin embargo, puedes personalizar los estilos usando CSS.
Agrega los siguientes estilos CSS a tu archivo.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

Los estilos anteriores establecerán el estilo de fuente de <dfn> en cursiva y el color de fuente en azul. El grosor de la fuente de <dt> también se cambia a negrita.

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta HTML <dfn> para crear una lista de definiciones con términos resaltados e información emergente. Al usar la etiqueta <dfn>, puedes hacer que tu contenido educativo sea más interactivo y atractivo visualmente para el usuario.

Término de Definición en HTML