Atributos globales de HTML

Los atributos globales son atributos que puedes añadir a cualquier elemento HTML. A diferencia de los atributos específicos de cada elemento — como href (solo en <a>), src (solo en <img>), o colspan (solo en celdas de tabla) — los atributos globales forman parte del vocabulario compartido que cualquier etiqueta entiende.

Esto es lo que los hace tan importantes: en lugar de aprender un atributo diferente para cada elemento, aprendes un conjunto de atributos globales y los reutilizas en todas partes. Usarás class e id para conectar elementos con CSS y JavaScript, data-* para adjuntar tus propios datos personalizados, tabindex para controlar el foco del teclado, lang y dir para hacer el contenido accesible en cualquier idioma, y hidden, title o contenteditable para el comportamiento cotidiano de la interfaz.

Que un atributo global sea válido en un elemento no significa que siempre tenga un efecto visible. Por ejemplo, spellcheck no cambiará el comportamiento ni la semántica de un párrafo, y lang no tiene efecto en un elemento sin contenido de texto. No hay problema — están permitidos en todas partes; simplemente no hacen nada donde no hay nada sobre lo que actuar.

Puedes encontrar todos los atributos globales y sus explicaciones en la tabla de referencia a continuación, seguida de un análisis más detallado de los que usarás con más frecuencia.

El atributo id

id le da a un elemento un nombre único en la página. Es el ancla que une HTML con el resto de la plataforma: CSS puede seleccionarlo con #name, JavaScript puede obtenerlo con document.getElementById(), una etiqueta puede vincular un control de formulario a él con for, y un enlace puede saltar directamente a él.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

El valor debe ser único dentro del documento y no contener espacios. Los id duplicados son inválidos y hacen que getElementById() devuelva solo la primera coincidencia. Aprende más en el capítulo del atributo id y consulta los enlaces ancla en HTML Links.

El atributo class

Mientras que id es para un único elemento, class es para grupos de elementos que comparten estilos o comportamiento. Un elemento puede tener varias clases separadas por espacios, y la misma clase puede reutilizarse en tantos elementos como se quiera.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Ambos botones comparten la clase btn (estilos comunes) y añaden una clase más para su variante. Esta es la base de cómo se aplica CSS — consulta CSS Selectors y CSS id and class.

Atributos personalizados data-*

data-* te permite adjuntar tus propios datos privados a un elemento sin necesidad de inventar atributos no estándar. Cualquier atributo cuyo nombre comience con data- es válido y es ignorado por el renderizado del navegador — existe únicamente para tus scripts.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Ten en cuenta la regla de nomenclatura: el atributo data-product-id se convierte en dataset.productId en JavaScript — el prefijo data- se elimina y cada segmento con guion se convierte en camelCase. Los valores son siempre strings, así que conviértelos (Number(btn.dataset.price)) cuando necesites un número.

El atributo tabindex

tabindex controla si un elemento puede recibir el foco del teclado y en qué orden la tecla Tab lo alcanza. Hay tres casos relevantes:

• tabindex="0" — agrega el elemento al orden de tabulación natural, en la posición determinada por su lugar en el documento. Úsalo para hacer que un elemento normalmente no enfocable (como un <div> que has convertido en un widget personalizado) sea accesible por teclado.
• tabindex="-1" — elimina el elemento del orden de tabulación, pero aún permite enfocarlo mediante JavaScript con element.focus(). Útil para mover el foco a una región (por ejemplo, un diálogo o un resumen de errores) sin incluirlo en la secuencia Tab.
• Un valor positivo (tabindex="1" y superiores) — fuerza al elemento al frente del orden de tabulación, por delante de todo lo que tiene tabindex="0" o ningún tabindex. Esto es un antipatrón: anula el orden de lectura natural y casi siempre confunde a los usuarios que navegan por teclado. Evítalo.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

La regla de accesibilidad a recordar: deja que el orden del DOM guíe el orden de tabulación. Usa 0 y -1 de forma deliberada, y reserva los valores positivos para nunca usarlos.

El atributo contenteditable

contenteditable="true" hace que el contenido de un elemento sea directamente editable por el usuario, convirtiendo un simple <div> en una superficie básica de texto enriquecido. contenteditable="false" (el valor predeterminado) lo mantiene en modo de solo lectura.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

Es el bloque de construcción detrás de los editores en página y los campos de notas en línea. Como el usuario puede cambiar el DOM, lee el texto actual en JavaScript con textContent o innerHTML del elemento cuando necesites guardarlo.

Los atributos lang y dir (internacionalización)

lang declara el idioma del contenido de un elemento usando un código de idioma como en, fr o ar. Establecer lang en el elemento <html> es esencial para la accesibilidad: los lectores de pantalla lo usan para elegir la pronunciación y la voz correctas, y los motores de búsqueda y las herramientas de traducción lo usan para identificar el idioma.

dir establece la dirección base del texto — ltr (de izquierda a derecha, el valor predeterminado), rtl (de derecha a izquierda, para idiomas como el árabe y el hebreo) o auto (deja que el navegador lo infiera a partir del contenido).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Para obtener detalles sobre el diseño de derecha a izquierda, consulta la propiedad CSS direction. Establece siempre lang en <html>, y agrégalo de nuevo en cualquier contenido en línea que cambie de idioma — hacerlo correctamente es una de las mejoras de accesibilidad más sencillas y de mayor impacto en una página.

Notas de accesibilidad

Algunos atributos globales tienen un efecto directo en las tecnologías de asistencia, así que úsalos con cuidado:

• lang — necesario para que los lectores de pantalla lean el contenido en el idioma y acento correctos. Establécelo en <html> y en cualquier elemento cuyo idioma difiera del de la página.
• dir — garantiza que los idiomas de derecha a izquierda se muestren y naveguen correctamente. Combínalo con lang para el contenido RTL.
• tabindex — los valores positivos rompen el orden de foco esperado para los usuarios que navegan por teclado y con lectores de pantalla; limítate a 0 y -1.
• accesskey — sus atajos de teclado frecuentemente entran en conflicto con los atajos de los navegadores y las tecnologías de asistencia, por lo que la tecla elegida puede no funcionar para todos. Trátalo como una conveniencia, nunca como la única forma de acceder a una función.

Resumen

Un puñado de atributos globales vale la pena conocer en profundidad porque los usarás constantemente: id, class, data-*, tabindex y el par de i18n lang / dir. El resto — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — son útiles para reconocer y consultar en la tabla anterior cuando una situación lo requiera. Y evita por completo los atributos eliminados (contextmenu, dropzone); ya no forman parte de HTML.

Práctica