Atributo

Un atributo es información extra que se escribe dentro de la etiqueta de apertura de un elemento. Los atributos configuran cómo se comporta el elemento, a qué recurso apunta, cómo se identifica o qué estado tiene. Sin atributos, muchos elementos no pueden cumplir su función: un <a> sin href no tiene adónde ir; un <img> sin src no sabe qué imagen mostrar.

Si el nombre del elemento define qué tipo de cosa es (un enlace, una imagen, un campo), los atributos definen los detalles concretos de esa cosa en particular: a dónde apunta ese enlace, qué archivo muestra esa imagen, qué tipo de dato espera ese campo. Un mismo elemento se comporta de formas muy distintas según los atributos que lleve — <input type="text"> y <input type="checkbox"> son el mismo elemento configurado de dos maneras opuestas.

Cada atributo es un par de nombre y valor: el nombre identifica qué se está configurando y el valor dice con qué. Algunos pertenecen a casi cualquier elemento (los globales, como id o class), otros solo tienen sentido en un elemento puntual (href en <a>, src en <img>). El navegador conoce de antemano el catálogo de atributos válidos para cada elemento y qué hacer con cada uno; los que no reconoce, simplemente los ignora sin error.

Cómo funciona

Los atributos siempre van dentro de la etiqueta de apertura, después del nombre del elemento y separados por al menos un espacio.

Sintaxis básica: nombre="valor"

<!-- href es el atributo; "https://example.com" es su valor -->
<a href="https://example.com">Visitá el sitio</a>

<!-- src y alt son dos atributos del mismo elemento -->
<img src="foto.jpg" alt="Una descripción de la foto" />

Reglas de sintaxis

• El nombre del atributo va primero, seguido de = y el valor entre comillas.
• Las comillas pueden ser dobles ("valor") o simples ('valor'). La convención universal — y la que sigue este sitio — es comillas dobles.
• Un elemento puede tener varios atributos separados por espacios. El orden entre ellos no importa para el navegador.
• El valor puede ser texto, una URL, un número, una palabra clave o una lista separada por espacios, según el atributo.

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">Abrir en nueva pestaña</a>

Este <a> tiene tres atributos: href (destino), target (dónde abrirlo) y rel (relación de seguridad). Cada uno cumple una función diferente.

Atributos booleanos

Algunos atributos no tienen valor: su sola presencia activa una opción. Escribirlos o no escribirlos es la diferencia entre activo e inactivo.

<!-- disabled desactiva el campo; su valor no importa, solo su presencia -->
<input type="text" disabled />

<!-- checked marca el checkbox de entrada -->
<input type="checkbox" checked />

<!-- required hace el campo obligatorio en formularios -->
<input type="email" required />

Técnicamente podés escribir disabled="disabled" o disabled="" — el navegador los trata igual que la forma corta. La convención moderna es omitir el valor por completo.

Gotcha: un atributo booleano que esté presente siempre está activo, sin importar el valor que le des. <input disabled="false" /> sí deshabilita el campo — disabled está presente. Para desactivarlo, tenés que eliminar el atributo del HTML.

Atributos globales vs. específicos

Algunos atributos son globales: los acepta cualquier elemento HTML.

Otros atributos son específicos del elemento: src solo tiene sentido en <img>, <script> y unos pocos más; href pertenece a <a> y <link>; action es de <form>.

Ejemplo realista

<a
  href="https://developer.mozilla.org/es/"
  target="_blank"
  rel="noopener noreferrer"
  class="enlace-externo"
  title="Abre la documentación de MDN en una nueva pestaña"
>
  Documentación MDN
</a>

Cada atributo cumple una función: href es el destino, target controla dónde se abre, rel agrega seguridad al abrir en pestaña nueva, class permite darle estilos con CSS y title aporta un tooltip de contexto.

Notas, gotchas e interacción

• Atributos desconocidos son ignorados por el navegador sin error, pero no tienen efecto. Si escribís <p colour="red">, el color no se aplica — eso lo hace CSS.
• id debe ser único en la página. Si dos elementos tienen el mismo id, el CSS y JavaScript pueden fallar silenciosamente al apuntar al elemento equivocado.
• class vs id: class puede repetirse en muchos elementos (es lo normal para aplicar el mismo estilo); id es uno solo por página.
• Atributos data-*: podés inventar atributos con el prefijo data-, por ejemplo data-producto-id="42". El navegador los ignora como estilo, pero JavaScript puede leerlos con element.dataset.

Vigente / legacy

La sintaxis nombre="valor" es parte de HTML desde sus orígenes y sigue siendo la forma estándar. Lo que cambió con HTML5 fue la legalización de algunas variantes que antes estaban prohibidas en XHTML (comillas opcionales en algunos casos, valores sin comillas). La convención moderna — y la de este sitio — es siempre usar comillas dobles para consistencia.