Atributos HTML — Fundamentos de HTML y CSS

• El atributo title
• ¿Cómo se escriben los atributos?
• Errores comunes que debes evitar
• ¿Y para qué sirven otros atributos?

Hasta ahora, aprendiste a qué son las etiquetas y cómo anidarlas. ¡Ya has avanzado bastante! Hoy vamos a descubrir algo nuevo: los atributos.

Imagina esto... Cada etiqueta HTML es como una caja con contenido. Los atributos son pequeñas etiquetas adhesivas que le pegas a esa caja para decirle al navegador cómo tratarla.

📦 <p> → es una caja con un párrafo.

🏷️ title="mensaje" → es una notita que le dice: “muestra este mensaje si alguien pasa el cursor”.

El atributo title

Vamos a ver un ejemplo con algo que puedes notar al instante.

👉 Pasa el cursor sobre este texto

<p title="Este texto aparece al pasar el mouse">Pasa el cursor sobre este texto</p>

Cuando pasas el mouse sobre el texto, aparece un mensajito flotante. Eso se llama un tooltip, y se logra gracias al atributo title.

Pruebálo en Codepen

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

¿Cómo se escriben los atributos?

Los atributos van siempre dentro de la etiqueta de apertura, con esta estructura:

<etiqueta atributo="valor">Contenido</etiqueta>

En este caso:

• atributo = title
• valor = el texto que quieres que aparezca al pasar el cursor

Errores comunes que debes evitar

No te preocupes si al principio cometes errores, ¡es parte del aprendizaje! Aquí van algunos tips:

✅ Usa siempre comillas alrededor del valor:

title="Hola"

✅ No pongas el contenido visible dentro del atributo:

<p title="Este es el mensaje">Este es el texto visible</p>

✅ Cierra bien la etiqueta (como siempre):

<p>Texto</p>

¿Y para qué sirven otros atributos?

Hoy conociste title, que ya te permite hacer algo genial: mostrar un mensaje cuando el usuario pasa el cursor. Pero más adelante, cuando aprendas otras herramientas como CSS y nuevas etiquetas, verás que hay muchos otros atributos que te ayudarán a hacer cosas como:

• 🎨 Cambiar colores y estilos con clases (class).
• 🧭 Darle un nombre único a un elemento (id).
• 🧩 Organizar mejor la estructura de tu página.
• 🖼️ Mostrar imágenes usando src.
• 🔗 Crear enlaces con href.

Algunos de estos atributos los vas a conocer muy pronto, en lecciones sobre imágenes, enlaces y estilos. Por ahora, no necesitas aprenderlos todos. Lo importante es que entiendas cómo funcionan los atributos y te sientas cómodo usándolos.

👣 ¡Estás dando pasos firmes y seguros! Cada pequeño detalle que aprendes hoy será clave para lo que viene mañana.

Materiales adicionales

1. Webinar de Códica 🎬 HTML desde cero