Atributos globales en HTML

Los atributos globales son los que puedes poner en cualquier elemento HTML, sea un <p>, un <img> o un <section>. Algunos los usarás a diario (id, class), otros solo de vez en cuando (inert, translate), pero conviene conocerlos todos para reconocerlos cuando aparezcan en el código de otra persona. En esta lección los verás agrupados por su utilidad, con ejemplos realistas.

Si todavía no tienes claro qué es un atributo o cómo se escribe, repasa antes elementos, etiquetas y atributos.

Identificar y agrupar: id y class

id: un nombre único

El atributo id da a un elemento un identificador único en toda la página. No puede haber dos elementos con el mismo id.

<section id="tarifas">
  <h2>Tarifas</h2>
  ...
</section>

Sirve para tres cosas:

1. Enlaces internos: <a href="#tarifas">Ver tarifas</a> salta a esa sección.
2. Conectar elementos: el for de un <label> apunta al id de su campo.
3. JavaScript: document.getElementById('tarifas') lo encuentra al instante.

También se puede usar en CSS (#tarifas { ... }), pero no es buena idea: un selector de id tiene una especificidad muy alta y cuesta sobrescribirlo después. Para dar estilos, usa clases.

class: etiquetas reutilizables

El atributo class asigna una o varias clases, separadas por espacios. La misma clase puede repetirse en tantos elementos como quieras:

<article class="tarjeta">Curso de iniciación</article>
<article class="tarjeta destacada">Curso de perfeccionamiento</article>
<article class="tarjeta agotada">Curso de técnica</article>

Aquí los tres artículos comparten el estilo tarjeta, y dos de ellos añaden una clase extra que los modifica. Es el mecanismo principal para aplicar CSS.

Diferencia entre id y class

	id	class
¿Cuántos por elemento?	Uno	Varios, separados por espacios
¿Se puede repetir en la página?	No	Sí
Uso principal	Enlaces internos, labels, JavaScript	Estilos CSS, agrupar elementos
Selector CSS	#nombre	.nombre

Una forma fácil de recordarlo: el id es como el DNI (uno por persona, no se repite); la class es como la profesión (muchas personas pueden ser “escaladora” o “monitor”).

Buenas prácticas para nombrar

• Escribe en minúsculas y separa palabras con guiones: menu-principal, precio-final. Es la convención más extendida en HTML y CSS.
• Sin espacios (en class, el espacio separa dos clases distintas), sin tildes ni eñes: anio, no año.
• No empieces por un número: 2-columnas da problemas en CSS. Mejor dos-columnas.
• Nombra por lo que es, no por cómo se ve: aviso-error aguanta un cambio de diseño; texto-rojo deja de tener sentido si el aviso pasa a ser naranja.

Estilo, ayuda e idioma: style, title, lang y dir

style

Aplica CSS directamente a un elemento:

<p style="color: #b00020; font-weight: bold;">Plazas agotadas</p>

Funciona, pero mezcla contenido y diseño, no se puede reutilizar y tiene prioridad sobre casi todo tu CSS. Resérvalo para pruebas rápidas o para valores que calcula JavaScript. Lo normal es usar una clase y escribir el CSS en su archivo.

title

Muestra un texto emergente (tooltip) al dejar el ratón encima:

<abbr title="Hojas de estilo en cascada">CSS</abbr>

Cuidado: en móviles y tabletas no hay “ratón encima”, y muchos lectores de pantalla no leen el title. Nunca pongas en él información que no esté en otro sitio.

lang

Indica el idioma del contenido. Se pone en <html lang="es"> para toda la página y en cualquier elemento que esté en otro idioma:

<p>El lema del club es <span lang="en">"climb harder"</span>.</p>

Así el lector de pantalla pronuncia esa frase con acento inglés, y el traductor automático sabe qué hacer con ella.

dir

Indica la dirección del texto: ltr (de izquierda a derecha, el normal) o rtl (de derecha a izquierda, para árabe o hebreo). También admite auto, útil para textos que escriben los usuarios:

<p dir="rtl" lang="ar">مرحبا</p>
<p dir="auto">{{ comentario del usuario }}</p>

Mostrar, ocultar y bloquear: hidden e inert

hidden

Es un atributo booleano que oculta el elemento. Equivale a display: none en CSS: no se ve, no ocupa espacio y los lectores de pantalla lo ignoran.

<p id="aviso-enviado" hidden>¡Gracias! Hemos recibido tu mensaje.</p>

Lo habitual es quitarlo con JavaScript cuando toca mostrarlo: aviso.hidden = false.

Cuidado: si en tu CSS pones display: flex a ese elemento, el CSS gana y el elemento se verá aunque tenga hidden. Un truco común es añadir [hidden] { display: none !important; } a tu hoja de estilos.

inert

Hace que un elemento y todo lo que contiene sea inerte: se ve, pero no se puede pulsar, ni enfocar con el teclado, ni seleccionar, y los lectores de pantalla lo ignoran.

<main inert>
  <!-- Mientras hay una ventana emergente abierta, el resto de la página no responde -->
</main>

Es muy útil para bloquear el fondo de la página cuando hay un menú o un diálogo abierto. En la lección de details, summary y dialog verás que <dialog> lo hace por ti.

Teclado y edición

tabindex

Controla si un elemento se puede alcanzar con la tecla Tab y en qué orden:

Valor	Qué hace
tabindex="0"	El elemento entra en el orden normal del Tab, según su posición en el HTML
tabindex="-1"	No se alcanza con Tab, pero JavaScript puede darle el foco con .focus()
tabindex="3" (positivo)	Fuerza un orden propio. No lo uses: rompe el orden lógico de la página

Los enlaces, botones y campos de formulario ya son enfocables sin hacer nada. Si necesitas tabindex="0" en un <div>, suele ser señal de que debería ser un <button>.

accesskey

Asigna un atajo de teclado al elemento:

<a href="/buscar" accesskey="b">Buscar</a>

La combinación real cambia según el navegador y el sistema (Alt + B, Ctrl + Alt + B…) y puede chocar con atajos del lector de pantalla. Se usa muy poco; es bueno reconocerlo, pero no lo necesitas en tus proyectos.

contenteditable

Convierte el contenido de un elemento en editable directamente en la página:

<div contenteditable="true">Escribe aquí tu nota...</div>

Es la base de los editores de texto enriquecido (como el de un blog o un gestor de correo). Lo editado no se guarda solo: tendrías que leerlo con JavaScript y enviarlo a un servidor.

spellcheck

Activa o desactiva el corrector ortográfico del navegador en campos y zonas editables:

<textarea name="comentario" spellcheck="true"></textarea>
<input name="usuario" spellcheck="false">

Desactívalo en campos donde la corrección molesta: nombres de usuario, códigos, direcciones de correo.

draggable

Indica si el elemento se puede arrastrar con el ratón (true o false). Por defecto, los enlaces y las imágenes ya se pueden arrastrar. Poner draggable="true" en otros elementos solo tiene sentido si luego programas qué pasa al soltarlos (con la API de arrastrar y soltar de JavaScript), por ejemplo en un tablero de tareas.

translate

Con translate="no" le dices a los traductores automáticos (como el de Chrome) que no traduzcan ese texto. Ideal para nombres de marca o fragmentos de código:

<p>Bienvenido a <span translate="no">Treparriscos</span>.</p>
<code translate="no">console.log()</code>

Datos propios: data-*

A veces quieres guardar en el HTML un dato que no se muestra pero que JavaScript necesita: el precio de un producto, el id de una base de datos, el nivel de un curso. Para eso existen los atributos data-*: inventas el nombre después de data-.

<li class="curso" data-id="17" data-nivel="iniciacion" data-plazas-libres="3">
  Iniciación a la escalada
</li>

Reglas:

• El nombre va en minúsculas y puede llevar guiones: data-plazas-libres.
• El valor siempre es texto (aunque parezca un número).
• No afecta a cómo se ve la página ni al SEO.

Leerlos desde JavaScript: dataset

Cada elemento tiene una propiedad dataset con todos sus data-*. Los guiones del nombre se convierten en camelCase:

const curso = document.querySelector('.curso');

console.log(curso.dataset.id);            // "17"
console.log(curso.dataset.nivel);         // "iniciacion"
console.log(curso.dataset.plazasLibres);  // "3"  (data-plazas-libres)

curso.dataset.plazasLibres = 2;           // cambia el atributo en el HTML

Fíjate en que dataset.id devuelve el texto "17". Si vas a sumar, conviértelo: Number(curso.dataset.id).

También puedes usarlos en CSS con selectores de atributo, por ejemplo .curso[data-nivel="iniciacion"] { ... }. Verás más sobre el DOM en la lección de JavaScript y el DOM.

Errores frecuentes

• Repetir un id. El navegador no se queja, pero getElementById solo encuentra el primero y los enlaces internos fallan. El validador sí lo detecta.
• Escribir varias clases en varios atributos. <p class="aviso" class="error"> es incorrecto: el segundo se ignora. Lo correcto es <p class="aviso error">.
• Poner espacios en un id. id="menu principal" no funciona como esperas. Usa menu-principal.
• Confiar en title para información importante. No se ve en el móvil.
• Usar tabindex positivo para “arreglar” el orden. Arregla el orden del HTML.
• Guardar datos privados en data-*. Cualquiera puede verlos con “Ver código fuente”.

Resumen

Atributo	Para qué sirve
id	Identificador único: enlaces internos, labels, JavaScript
class	Una o varias clases reutilizables, sobre todo para CSS
style	CSS en línea (úsalo poco)
title	Texto emergente al pasar el ratón
lang / dir	Idioma y dirección del texto
hidden	Oculta el elemento
inert	El elemento se ve pero no se puede usar
tabindex	Si se enfoca con Tab (0) o solo por JavaScript (-1)
accesskey	Atajo de teclado (poco recomendable)
contenteditable	Contenido editable en la página
spellcheck	Activa o desactiva el corrector
draggable	Si se puede arrastrar
translate	no evita la traducción automática
data-*	Datos propios, accesibles con elemento.dataset

const socio = document.querySelector('li');