Atributos HTML

En la lección anterior aprendiste que los elementos se construyen con etiquetas y contenido. Los atributos dan a esas etiquetas información extra. Sin atributos, muchos elementos no pueden hacer su trabajo real: un enlace necesita una dirección y una imagen necesita una ruta de archivo.

¿Qué es un atributo HTML?

Un atributo HTML es un nombre y un valor dentro de la etiqueta de inicio de un elemento. Dice al navegador algo sobre ese elemento que no es el mismo texto visible entre etiquetas.

Respuesta directa

Los atributos usan un patrón simple: name="value". Pertenecen a la etiqueta de apertura, antes del > de cierre. Ejemplos comunes: href en enlaces y src más alt en imágenes. Las lecciones siguientes usan atributos a menudo; aprende el patrón una vez aquí.

Leer el ejemplo

• En el enlace, href guarda la URL de destino
• El texto visible del enlace sigue siendo el contenido entre <a> y </a>
• En la imagen, src apunta al archivo de imagen
• alt ofrece texto alternativo si la imagen no carga o para accesibilidad
• Ambos atributos están dentro de la etiqueta de inicio

Reglas de sintaxis para recordar

1. Pon atributos solo en la etiqueta de inicio — no en la de cierre
2. Separa el nombre del valor con =
3. Envuelve la mayoría de valores entre comillas: href="https://example.com"
4. Puedes poner más de un atributo en la misma etiqueta de inicio, separados por espacios
5. Los nombres de atributo suelen escribirse en minúsculas en HTML moderno

Aquí href fija la dirección y title puede dar texto orientativo extra (a menudo como tooltip en navegadores de escritorio). No necesitas cada atributo opcional en cada etiqueta — usa los que el elemento necesita.

Atributos frente a contenido

El contenido es lo que va entre la etiqueta de inicio y la de fin, como las palabras de un párrafo. Los atributos viven en la etiqueta de inicio y configuran el elemento. Mezclarlos causa errores: poner una URL solo en el texto del enlace no crea un enlace que funcione; la URL pertenece a href.

Nota sobre elementos vacíos

Los elementos vacíos como img siguen usando atributos aunque no tengan etiqueta de fin separada. Es normal: los atributos describen el elemento; no son el contenido envuelto.

Pruébalo tú mismo

1. Abre una página HTML básica en tu editor
2. Añade un enlace con atributo href a una URL real o de ejemplo
3. Añade un img con src y alt significativo (cualquier ruta de práctica o nombre provisional para aprender la sintaxis)
4. Guarda y abre la página en el navegador
5. Haz clic en el enlace y comprueba en el código fuente que el marcado de la imagen está presente aunque falte el archivo

Errores comunes

• Escribir atributos en la etiqueta de cierre
• Olvidar comillas en valores que las necesitan
• Usar el atributo incorrecto (por ejemplo poner una URL en src en un enlace en vez de href)
• Dejar alt vacío en imágenes informativas
• Suponer que el texto del atributo siempre aparece como contenido visible — muchos atributos configuran comportamiento o accesibilidad

Resumen

• Los atributos añaden información extra dentro de la etiqueta de inicio
• La forma habitual es name="value"
• Los enlaces necesitan href; las imágenes suelen necesitar src y alt
• El contenido va entre etiquetas; los atributos configuran la etiqueta
• Puedes combinar varios atributos en una etiqueta de inicio
• Las lecciones posteriores reutilizan este patrón en encabezados, formularios, medios y más