Cómo hacer texto invisible en HTML/CSS (visibility, display, opacity, color)

Hay varias formas de ocultar texto en HTML según el propósito (accesibilidad, SEO, animación, impresión).

1. visibility: hidden — ocupa espacio, no se ve

<div style="visibility: hidden;">Texto invisible pero reserva su hueco</div>

• El elemento sigue en el flujo, afecta layout.
• Eventos de ratón no se disparan en él.
• Hijos pueden ser visibility: visible para reaparecer.

2. display: none — eliminado del flujo, no ocupa espacio

<div style="display: none;">Texto completamente fuera del render</div>

• No se renderiza, no ocupa espacio, no recibe eventos.
• Ideal para toggles (menús, modales, pestañas) con JS.

3. opacity: 0 — invisible pero interactuable

<div style="opacity: 0;">Invisible pero clickeable</div>

• Sigue en el flujo, ocupa espacio, recibe clics, foco, eventos.
• Útil para transiciones: transition: opacity 0.3s.

4. color: transparent / rgba(0,0,0,0) — solo el texto invisible

<span style="color: transparent;">Texto invisible, fondo y borde visibles</span>

• El cuadro del elemento sigue ahí; selección de usuario (arrastrar) revela el texto.

5. font-size: 0 / text-indent: -9999px (técnicas antiguas, no recomendadas)

Pueden causar problemas de accesibilidad y SEO (Google penaliza texto oculto manipulativo).

6. Atributo HTML5 hidden (booleano) — equivalente a display:none

<div hidden>Oculto por defecto</div>

• Soportado en todos los navegadores modernos.
• Se puede alternar con JS: element.hidden = true/false.

Accesibilidad (screen readers)

• display:none, visibility:hidden, hidden → no se leen por lectores de pantalla.
• Si quieres ocultar visualmente pero sí leer (etiquetas para inputs, landmarks): usa clase .sr-only (Bootstrap) / .visually-hidden (Bootstrap 5):

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  

Resumen: ¿cuál usar?