Docs ejecutables de HTML: Atributos HTML

Q: ¿Qué diferencia hay entre class e id en HTML?

Un id debe ser único en la página e identifica un solo elemento, para enlaces #fragment, y getElementById. Una class la pueden compartir muchos elementos, y un elemento puede tener varias clases separadas por espacios. Usa clases para dar estilo.

Q: ¿Cómo pongo varias clases a un elemento HTML?

Ponlas en un solo atributo class separadas por espacios: . Escribir class dos veces no funciona: el navegador solo se queda con el primero.

Q: ¿Por qué mi botón sigue deshabilitado con disabled="false"?

disabled es un atributo booleano: su presencia significa verdadero, diga lo que diga el valor. Para habilitar el elemento, quita el atributo, o asigna button.disabled = false en JavaScript, que lo elimina.

Q: ¿Puedo inventar mis propios atributos HTML?

Usa el prefijo data-: data-price="12" o data-user-id="7" son válidos en cualquier elemento y se leen en JavaScript con element.dataset. Los nombres inventados sin el prefijo son HTML no válido.

Qué son los atributos HTML

Un atributo añade información a un elemento. Va dentro de la etiqueta de apertura, escrito como un nombre, un signo igual y un valor entre comillas: name="value". Un elemento puede tener cualquier cantidad de atributos, separados por espacios.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href le dice al enlace a dónde ir, src y alt describen la imagen, type, placeholder y required configuran el campo. Cada elemento tiene su propio conjunto de atributos, y unos pocos (los atributos globales de más abajo) funcionan en todos los elementos.

Reglas de sintaxis

<input type="text" name="city" value="Paris" disabled>

Nombre, signo igual, valor entre comillas. Las comillas dobles son la convención; las simples también funcionan (title='Say "hi"' es la forma de meter una comilla doble dentro de un valor).
Los nombres no distinguen mayúsculas de minúsculas. CLASS y class son el mismo atributo. Los valores sí: class="Box" y class="box" son clases distintas.
Las comillas son opcionales sin espacios, pero ponlas igual. class=big box le da al elemento la clase big y un segundo atributo sin sentido llamado box.
El orden no importa. <img alt="" src="a.png"> es lo mismo que <img src="a.png" alt="">.
Cada nombre una sola vez por elemento. Si un atributo aparece dos veces, el navegador se queda con el primero y descarta el segundo sin avisar.

Atributos booleanos

Algunos atributos están activados o desactivados. En estos, la presencia significa verdadero y el valor se ignora. disabled, checked, required, readonly, hidden, multiple, autofocus y open funcionan así.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

El tercer botón está deshabilitado aunque el valor diga false, porque el navegador solo comprueba si el atributo está. Para desactivar un atributo booleano, quítalo. En JavaScript, button.disabled = false hace justo eso.

El atributo class

class le da a un elemento uno o más nombres que el CSS y el JavaScript usan para encontrarlo. Varios elementos pueden compartir una clase, y un elemento puede tener varias clases, separadas por espacios:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Cada clase extra añade sus reglas encima. En CSS una clase se selecciona con un punto (.card); en JavaScript, element.classList.add('featured') y classList.remove las cambian. Las clases son la forma normal de dar estilo: la mayor parte de tu CSS apuntará a clases.

El atributo id

id le da a un elemento un nombre que debe ser único en la página. Úsalo cuando necesites exactamente un elemento: el destino de un enlace, un <label for> o document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Al hacer clic en la etiqueta, el foco pasa al campo, porque for="email" apunta a id="email". El enlace se desplaza a #pricing porque el fragmento del href coincide con el id.

	`class`	`id`
Cuántos elementos pueden compartirlo	Cualquier número	Uno (único)
Valores por elemento	Varios, separados por espacios	Uno
Selector CSS	`.name`	`#name`
Uso típico	Dar estilo a grupos de elementos	Destinos de enlaces, etiquetas, un elemento concreto en JavaScript

Un id no puede contener espacios. Empiézalo con una letra para que sea fácil de usar en CSS: #2col no es un selector CSS válido sin escaparlo.

Atributos globales

Estos atributos funcionan en cualquier elemento:

Atributo	Qué hace
`id`	Nombre único del elemento
`class`	Lista de nombres de clase separados por espacios
`style`	CSS en línea, como `style="color: red"`
`title`	Texto de ayuda que aparece al pasar el ratón
`lang`	Idioma del contenido, como `lang="fr"`
`dir`	Dirección del texto: `ltr`, `rtl` o `auto`
`hidden`	Oculta el elemento (booleano)
`tabindex`	Hace que un elemento reciba el foco con Tab, o fija su orden
`contenteditable`	Permite al usuario editar el texto del elemento
`data-*`	Tus propios datos, que se leen con JavaScript

El atributo lang tiene su propia página porque afecta a los lectores de pantalla, la traducción y la búsqueda.

Atributos data-*

Cuando necesites guardar un valor propio en un elemento, pon el prefijo data- al nombre. Después del prefijo vale cualquier nombre, y JavaScript lee los valores con element.dataset, con los guiones convertidos a camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id se convierte en dataset.productId. Los valores siempre vuelven como texto, así que conviértelos con Number() antes de hacer cálculos. El CSS también puede seleccionarlos: [data-price="4.50"].

Errores comunes

Escribir class dos veces. <div class="a" class="b"> solo conserva a. Pon las dos en un atributo: class="a b".
Repetir un id. Dos elementos con el mismo id rompen los enlaces #, las etiquetas y getElementById, que solo devuelve el primero. Usa una clase para todo lo que se repita.
disabled="false" o checked="false". El atributo sigue presente, así que sigue activo. Quítalo en su lugar.
Valores sin comillas con espacios. alt=My photo asigna a alt el valor My. Pon comillas a todos los valores.
Inventar atributos sin data-. <div price="4"> es HTML no válido y puede chocar con un futuro atributo estándar. Usa data-price.

Preguntas frecuentes

¿Qué es un atributo HTML?

Un atributo es información extra escrita dentro de una etiqueta de apertura como name="value". Configura el elemento: href indica a dónde va un enlace, src y alt describen una imagen, class e id permiten que el CSS y el JavaScript encuentren el elemento.

¿Qué diferencia hay entre class e id en HTML?

Un id debe ser único en la página e identifica un solo elemento, para enlaces #fragment, <label for> y getElementById. Una class la pueden compartir muchos elementos, y un elemento puede tener varias clases separadas por espacios. Usa clases para dar estilo.

¿Cómo pongo varias clases a un elemento HTML?

Ponlas en un solo atributo class separadas por espacios: <div class="card featured dark">. Escribir class dos veces no funciona: el navegador solo se queda con el primero.

¿Los atributos HTML necesitan comillas?

Las comillas son opcionales cuando el valor no tiene espacios ni caracteres especiales, pero ponerlas siempre es el hábito seguro. class=big box le da al elemento la clase big más un atributo aparte llamado box.

¿Por qué mi botón sigue deshabilitado con disabled="false"?

disabled es un atributo booleano: su presencia significa verdadero, diga lo que diga el valor. Para habilitar el elemento, quita el atributo, o asigna button.disabled = false en JavaScript, que lo elimina.

¿Puedo inventar mis propios atributos HTML?

Usa el prefijo data-: data-price="12" o data-user-id="7" son válidos en cualquier elemento y se leen en JavaScript con element.dataset. Los nombres inventados sin el prefijo son HTML no válido.

Conceptos relacionados