Definición destacada
¿Como funciona el comando en HTML5: 'dt'?
Última modificación: 2024-06-17
Descripción detallada de la instrucción <dt> en HTML5
El elemento <dt> en HTML5 se utiliza dentro de una lista de definiciones (<dl>, description list en inglés) y se emplea para definir un término o un nombre dentro de esta lista. Básicamente, <dt> representa la parte del “término” en una lista de definiciones.
Atributos del elemento <dt>
El elemento <dt> admite varios atributos globales, no tiene atributos específicos propios. Los atributos globales incluyen:
- id: Un identificador único para el elemento.
- class: Una o más clases CSS para el elemento.
- style: Reglas de estilo CSS en línea aplicables al elemento.
- title: Información adicional sobre el elemento, generalmente mostrada como un tooltip cuando el ratón pasa sobre el elemento.
- lang: Define el idioma del contenido del elemento.
- dir: Define la dirección del texto. Los valores posibles son
ltr(left to right) yrtl(right to left). - hidden: Especifica que el elemento no será mostrado.
- tabindex: Especifica el orden en el que los elementos recibirán el foco al navegar con el teclado.
- accesskey: Proporciona un atajo de teclado para el elemento.
- contenteditable: Indica si el contenido del elemento es editable.
- spellcheck: Indica si el control ortográfico se debe activar en el contenido editable de un elemento.
- draggable: Especifica si el elemento se puede arrastrar.
Esta es la lista de atributos globales, aplicables a la mayoría de los elementos HTML, incluido <dt>.
Uso de <dt> en HTML5 con ejemplos
El uso principal de <dt> es dentro de una lista de definiciones (<dl>), donde se define términos seguidos de sus descripciones asociadas (<dd>).
Ejemplo sencillo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Definición de Lista</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para la creación de páginas web.</dd>
<dt>CSS</dt>
<dd>Lenguaje de hojas de estilo que se usa para describir cómo se debe presentar HTML.</dd>
<dt>JavaScript</dt>
<dd>Lenguaje de programación que permite hacer páginas web interactivas.</dd>
</dl>
</body>
</html>En este ejemplo, se crean tres términos (<dt>) con sus correspondientes descripciones (<dd>):
- HTML: Lenguaje de marcado para la creación de páginas web.
- CSS: Lenguaje de hojas de estilo que se usa para describir cómo se debe presentar HTML.
- JavaScript: Lenguaje de programación que permite hacer páginas web interactivas.
Ejemplo con atributos globales:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo con Atributos Globales</title>
<style>
.highlight {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<dl>
<dt id="term-html" class="highlight" title="Hypertext Markup Language">HTML</dt>
<dd>Lenguaje de marcado para la creación de páginas web.</dd>
<dt id="term-css" class="highlight" title="Cascading Style Sheets">CSS</dt>
<dd>Lenguaje de hojas de estilo que se usa para describir cómo se debe presentar HTML.</dd>
<dt id="term-js" class="highlight" title="JavaScript">JavaScript</dt>
<dd>Lenguaje de programación que permite hacer páginas web interactivas.</dd>
</dl>
</body>
</html>En este segundo ejemplo, se utilizan varios atributos globales como id, class y title para proporcionar identificadores únicos, clases de estilo y tooltips para los términos respectivamente.
En conclusión, el elemento <dt> es esencial en HTML5 para crear listas de definiciones organizadas y semánticamente claras, permitiendo agregar metadatos adicionales mediante los atributos globales para mejorar el diseño y la accesibilidad.