Títulos y destinos de enlaces HTML

La sesión de enlaces te dio elementos a que funcionan con valores href claros. Dos extras comunes cambian la experiencia sin reemplazar href: un atributo title para una pista corta al pasar el cursor, y un target que puede abrir el destino en una pestaña nueva del navegador. Usados con cuidado, ayudan. En cada ítem del menú, molestan y crean trampas de seguridad.

Qué hacen estos atributos

href sigue decidiendo adónde va el enlace. title, target y rel ajustan pistas y cómo el navegador abre ese destino. Apréndelos como herramientas opcionales sobre un texto de enlace sólido — no como sustitutos de una redacción descriptiva.

Respuesta directa

• title="…" — texto opcional de tooltip asesor al pasar el cursor (el soporte y la utilidad varían; nunca confíes solo en él)
• target="_blank" — abrir en una pestaña o ventana nueva
• Con _blank, también pon rel="noopener noreferrer" para que la página nueva no tome el control total de tu pestaña original mediante window.opener (patrón cotidiano más seguro)
  Mantén la navegación dentro del sitio en la misma pestaña por defecto. Reserva _blank para casos en que quedarte en tu página realmente ayuda — a menudo referencias externas o descargas.

title, target y rel de un vistazo

Un tooltip title útil

Usa title cuando una pista corta añade valor más allá del texto visible del enlace. No pegues la misma frase en ambos sitios esperando claridad doble — las experiencias de lector de pantalla y hover difieren, y la repetición vacía desperdicia atención.

Lectura del ejemplo title

• El texto visible Beginner guide sigue siendo la etiqueta principal
• title añade una cadena asesora breve al pasar el cursor en muchos navegadores de escritorio
• Móvil y tecnología de asistencia pueden no exponer title igual — mantén el texto visible fuerte
• href sigue apuntando a guide.html; title no navega por sí solo

Pestaña nueva con rel más seguro

Abrir un sitio externo en una pestaña nueva puede dejar tu lección abierta. Empareja _blank con rel="noopener noreferrer" como hábito más seguro por defecto en esos casos.

Por qué noopener y noreferrer

• noopener reduce el riesgo de que la página nueva manipule tu pestaña original vía window.opener
• noreferrer también evita enviar un referrer en muchos navegadores (efecto de privacidad; aún se enseña a menudo con este patrón)
  No necesitas teoría profunda de seguridad del navegador en este curso — memoriza los atributos emparejados para enlaces externos _blank y sigue adelante.

No pongas blank en todo

Las pestañas nuevas se multiplican. Si cada enlace de la barra lateral abre _blank, los usuarios pierden la historia simple del botón Atrás y terminan con un montón de pestañas. Prefiere enlaces de la misma pestaña para tus propias páginas (about.html, siguiente lección, inicio). Usa _blank al salir de tu sitio o cuando el requisito del producto lo pide con claridad.

title no es el título de la página

El <title> del documento en head etiqueta toda la pestaña. El atributo title en un a es solo una pista en ese enlace. Trabajos distintos, palabra inglesa similar — no los confundas.

Práctica en tu editor

1. Añade un enlace local con texto visible claro y un title útil que aporte un detalle extra.
2. Añade un enlace externo con target="_blank" y rel="noopener noreferrer".
3. Pasa el cursor (en escritorio) para ver el tooltip; haz clic para confirmar una pestaña nueva.
4. Mantén un tercer enlace interno sin _blank y confirma que reemplaza la pestaña actual con normalidad.
5. Reescribe cualquier title que solo repita el texto del enlace sin información nueva.

Errores fáciles

• Usar _blank en cada ítem de menú interno
• Olvidar rel="noopener noreferrer" en enlaces externos _blank
• Escribir un title inútil que solo ecoa el texto del enlace
• Creer que title o target pueden reemplazar un href faltante
• Confundir el atributo title del enlace con el elemento <title> del documento

Resumen

• title puede añadir una pista corta al pasar el cursor; el texto visible del enlace sigue siendo principal
• target="_blank" abre una pestaña o ventana nueva
• Empareja _blank con rel="noopener noreferrer" para enlaces externos más seguros
• Prefiere navegación en la misma pestaña para tus propias páginas
• href sigue siendo el destino; estos atributos solo refinan la experiencia