Etiqueta dt en HTML

La etiqueta HTML <dt> se utiliza para definir un término en una lista de definición. Esta etiqueta se utiliza junto con la etiqueta <dl> (lista de definición) y la etiqueta <dd> (definición).

La etiqueta <dt> se coloca antes de la etiqueta <dd> y se utiliza para especificar el término que se está definiendo en la lista. Por ejemplo, en una lista de definición de términos de un glosario, la etiqueta <dt> se utilizaría para definir el término, mientras que la etiqueta <dd> se utilizaría para proporcionar la definición del término.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

HTML5 para Mentes Maestras, 2da Edición (Spanish Edition)

Ver Ofertas en Amazon

HTML5: La Guía Completa para Formatear Sitios Web...

Ver Ofertas en Amazon

Ejemplos de uso

Aquí tienes un ejemplo de cómo se podría utilizar la etiqueta <dt> en HTML5:


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de uso de la etiqueta &lt;dt&gt;</title>
</head>
<body>
	<h1>Glosario de términos</h1>
	<dl>
		<dt>HTML</dt>
		<dd>HyperText Markup Language</dd>
		<dt>CSS</dt>
		<dd>Cascading Style Sheets</dd>
		<dt>JS</dt>
		<dd>JavaScript</dd>
	</dl>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se ha creado una lista de definición que contiene tres términos: HTML, CSS y JS. Cada término se define utilizando la etiqueta <dt> y se proporciona una definición utilizando la etiqueta <dd>. La lista de definición completa se encuentra dentro de la etiqueta <dl>.

Es importante tener en cuenta que el código HTML puede variar dependiendo de la estructura de la página web y de cómo se quiera mostrar la lista de definición en la página.

Atributos

La etiqueta HTML <dt> no tiene muchos atributos específicos, ya que su función principal es simplemente definir un término en una lista de definición.

Sin embargo, aquí te presento los atributos globales disponibles:

class: se utiliza para asignar una o varias clases CSS al elemento <dt>, lo que permite aplicar estilos personalizados a ese elemento.

id: se utiliza para especificar un identificador único para el elemento <dt>. Este atributo es útil para vincular el elemento con estilos personalizados o para hacer referencia al elemento desde otros elementos o scripts en la página.

lang: se utiliza para especificar el idioma principal utilizado en el contenido del elemento <dt>.

dir: se utiliza para especificar la dirección del texto del contenido del elemento <dt>. Los valores posibles son “ltr” para izquierda a derecha y “rtl” para derecha a izquierda.

title: se utiliza para proporcionar información adicional sobre el elemento <dt>, que puede ser mostrada en un tooltip cuando el cursor se sitúa sobre el elemento.

Es importante tener en cuenta que estos atributos son opcionales y no es necesario utilizarlos para que la etiqueta <dt> funcione correctamente.

Más ejemplos

Aquí tienes dos ejemplos avanzados de cómo se puede utilizar la etiqueta <dt> en HTML5:

Ejemplo 1: Lista de definición con enlaces

Este ejemplo muestra cómo utilizar la etiqueta <dt> para crear una lista de definición con enlaces en cada término. Se utilizan los atributos href y target para crear enlaces que se abren en una nueva pestaña del navegador.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta &lt;dt&gt; con enlaces</title>
</head>
<body>
	<h1>Glosario de términos</h1>
	<dl>
		<dt><a href="https://es.wikipedia.org/wiki/HTML" target="_blank">HTML</a></dt>
		<dd>HyperText Markup Language</dd>
		<dt><a href="https://es.wikipedia.org/wiki/CSS" target="_blank">CSS</a></dt>
		<dd>Cascading Style Sheets</dd>
		<dt><a href="https://es.wikipedia.org/wiki/JavaScript" target="_blank">JS</a></dt>
		<dd>JavaScript</dd>
	</dl>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, cada término se define utilizando la etiqueta <dt> y se crea un enlace utilizando la etiqueta <a>.

Los atributos href y target se utilizan para especificar la dirección del enlace y para indicar que el enlace se debe abrir en una nueva pestaña del navegador.

Ejemplo 2: Lista de definición con imágenes

Este ejemplo muestra cómo utilizar la etiqueta <dt> para crear una lista de definición que incluye imágenes en cada término. Se utilizan los atributos src, alt y title para mostrar las imágenes y proporcionar información adicional.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta &lt;dt&gt; con imágenes</title>
</head>
<body>
	<h1>Glosario de términos</h1>
	<dl>
		<dt><img src="html.png" alt="HTML" title="HyperText Markup Language"></dt>
		<dd>HyperText Markup Language</dd>
		<dt><img src="css.png" alt="CSS" title="Cascading Style Sheets"></dt>
		<dd>Cascading Style Sheets</dd>
		<dt><img src="js.png" alt="JS" title="JavaScript"></dt>
		<dd>JavaScript</dd>
	</dl>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, cada término se define utilizando la etiqueta <dt> y se muestra una imagen utilizando la etiqueta <img>.

Los atributos src se utilizan para especificar la ruta de la imagen, alt se utiliza para proporcionar un texto alternativo en caso de que la imagen no se pueda cargar, y title se utiliza para proporcionar información adicional sobre la imagen.