El Atributo TITLE

Es una herramienta versátil que permite agregar información adicional a un elemento, mostrándose como un tooltip o texto emergente cuando el usuario pasa el cursor sobre él.

El atributo title en HTML es una herramienta versátil que permite agregar información adicional a un elemento, mostrándose como un tooltip (texto emergente) cuando el usuario pasa el cursor sobre él. Aunque es útil, debe emplearse con cuidado para garantizar accesibilidad y usabilidad. A continuación, te explicamos cómo usarlo correctamente.

1. ¿Qué es el Atributo title?

  • Propósito: Proporcionar información complementaria sobre un elemento, como una descripción, aclaración o contexto.

  • Comportamiento:

    • Se muestra como un tooltip al hacer hover (en navegadores de escritorio).

    • En dispositivos táctiles (móviles/tabletas), el title no es accesible mediante hover.

  • Compatibilidad: Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

2. Sintaxis Básica

El atributo title es global, lo que significa que puede usarse en casi cualquier elemento HTML:

html
Copy
<elemento title="texto descriptivo">...</elemento>
 
Run HTML

3. Ejemplos Prácticos

3.1. Enlaces (<a>)

Proporciona una vista previa del destino del enlace:

html
Copy
<a 
  href="https://ejemplo.com" 
  title="Visita el sitio oficial de Ejemplo"
>
  Sitio web
</a>
 
Run HTML

3.2. Imágenes (<img>)

Añade una descripción adicional (no reemplaza al atributo alt):

html
Copy
<img 
  src="montaña.jpg" 
  alt="Montaña nevada" 
  title="Foto del Monte Everest"
>
 
Run HTML

3.3. Abreviaturas (<abbr>)

Explica el significado de una abreviatura:

html
Copy
<abbr title="Organización de las Naciones Unidas">ONU</abbr>
 
Run HTML

3.4. Campos de Formulario (<input>, <textarea>)

Brinda instrucciones o ejemplos:

html
Copy
<input 
  type="text" 
  name="usuario" 
  title="Ingresa tu nombre de usuario (mín. 6 caracteres)"
  placeholder="Usuario"
>
 
Run HTML

4. Mejores Prácticas

  1. Mantén el texto breve:
    Los tooltips largos pueden truncarse en algunos navegadores. Ejemplo:

    html
    Copy
    <!-- ✔️ Correcto -->
<button title="Guardar cambios">Guardar</button>

<!-- ❌ Evitar -->
<button title="Haz clic aquí para guardar los cambios realizados en el documento actual...">Guardar</button>
     

 

  • Run HTML

  • No uses title para información crítica:

    • Los usuarios de móviles no verán el tooltip.

    • Los lectores de pantalla pueden ignorarlo o leerlo de forma inconsistente.

  • Combínalo con accesibilidad:

    • Para contenido importante, usa texto visible o atributos ARIA (aria-label, aria-describedby).

    • Ejemplo accesible:

      html
      Copy
      <button aria-label="Borrar documento" title="Borrar documento">????️</button>
       

 

    • Run HTML

**5. Diferencias Clave: title vs alt vs aria-label

Atributo Uso Principal Accesibilidad
title Información complementaria (tooltip). Limitada (depende del dispositivo).
alt Texto alternativo para imágenes. Esencial para lectores de pantalla.
aria-label Describe elementos interactivos. Prioritario para accesibilidad.

6. Casos de Uso Comunes

  • Iconos sin texto:

    html
    Copy
    <span class="icon" title="Configuración">⚙️</span>
     

 

  • Run HTML

  • Enlaces a archivos:

    html
    Copy
    <a href="informe.pdf" title="Descargar informe (PDF, 2MB)">???? Informe</a>
     
  • Run HTML

  • Validación de formularios:

    html
    Copy
    <input 
  type="password" 
  title="La contraseña debe tener al menos 8 caracteres, incluyendo números y símbolos"
  pattern="^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{8,}$"
>
     

 

  • Run HTML

7. Limitaciones y Consideraciones

  • Dispositivos móviles: El title no se muestra al tocar elementos.

  • Estilos personalizados: El tooltip usa estilos predeterminados del navegador (no se puede personalizar con CSS).

  • Accesibilidad:

    • Algunos lectores de pantalla (como NVDA) leen el title, pero otros (como VoiceOver) lo ignoran.

    • No confíes en él para información esencial.

8. Ejemplo Integrado

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de title</title>
</head>
<body>
  <!-- Abreviatura -->
  <p>
    La <abbr title="Inteligencia Artificial">IA</abbr> está transformando la tecnología.
  </p>

  <!-- Enlace con tooltip -->
  <a 
    href="https://es.wikipedia.org" 
    title="Enciclopedia en línea de acceso libre"
  >
    Wikipedia
  </a>

  <!-- Icono con título -->
  <button title="Buscar">
    ????
  </button>

  <!-- Campo de formulario -->
  <input 
    type="email" 
    placeholder="Correo electrónico"
    title="Ejemplo: usuario@dominio.com"
  >
</body>
</html>
 
Run HTML

9. Conclusión

El atributo title es útil para:

  • Ofrecer información adicional de manera discreta.

  • Mejorar la usabilidad en navegadores de escritorio.

  • ¡Recuerda!

    • No sustituye al texto visible o atributos de accesibilidad.

    • Úsalo como complemento, no como fuente principal de información.

Con este tutorial, podrás implementar title de forma efectiva y responsable en tus proyectos. ????️????