Etiqueta HTML <Blink>
La etiqueta <blink> es un elemento HTML obsoleto que hacía parpadear el texto. Aprende por qué se eliminó y cómo crear el efecto con CSS o JavaScript.
La etiqueta <blink> era un elemento HTML no estándar que hacía parpadear el texto que contenía. Fue introducida por Netscape Navigator en los años 90, pero nunca se incluyó en ninguna especificación oficial de HTML. Los navegadores modernos ya no la soportan, por lo que no tiene ningún efecto en la web actual.
Esta página explica el origen de la etiqueta, por qué todos los navegadores la eliminaron y cómo crear un efecto de parpadeo de forma correcta usando CSS o JavaScript, respetando siempre las preferencias de accesibilidad de los usuarios.
Por qué se eliminó la etiqueta <blink>
El elemento <blink> fue descartado por dos razones principales:
- Nunca fue estandarizado. Al ser una extensión propietaria de Netscape que nunca formó parte de la especificación HTML del W3C, los fabricantes de navegadores no tenían obligación de mantenerla. Mozilla eliminó el soporte de
<blink>en Firefox en 2013, y otros navegadores siguieron el mismo camino. - Perjudica la accesibilidad. El contenido que parpadea o se mueve por sí solo es un problema conocido de usabilidad y accesibilidad. Distrae a los lectores, dificulta la lectura del texto y puede causar verdaderas dificultades a personas con discapacidades cognitivas, trastornos de atención o condiciones vestibulares. El movimiento incontrolable también puede provocar malestar o, en casos extremos, convulsiones.
Por esta razón, el contenido parpadeante está restringido por las Pautas de Accesibilidad al Contenido Web (WCAG). El Criterio de Éxito 2.2.2 "Pausar, Detener, Ocultar" exige que cualquier contenido en movimiento, parpadeante o de actualización automática que dure más de cinco segundos pueda ser pausado, detenido u ocultado por el usuario. La antigua etiqueta <blink> no ofrecía a los usuarios ninguna forma de hacerlo, lo que es una de las razones por las que se considera un antipatrón.
Si aún deseas un efecto de parpadeo, usa CSS o JavaScript (como se muestra a continuación) y siempre proporciona una forma de respetar a los usuarios que prefieren el movimiento reducido.
La etiqueta <blink> es una etiqueta HTML obsoleta. Aunque algunos navegadores aún pueden tener soporte para <blink>, está en proceso de eliminarse. No uses este elemento, ya que puede hacer que tus páginas se rompan. Puedes usar CSS y JavaScript en su lugar para crear un efecto de parpadeo.
Ejemplo de código HTML con <blink>:
Ejemplo de etiqueta HTML <blink>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blink {
color: #1c87c9;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>The <blink> Element </h1>
<blink>The <blink> element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
</body>
</html>Efecto de parpadeo con CSS
La forma recomendada y basada en estándares de crear un efecto de parpadeo es la animación CSS con la regla @keyframes. Esto te da control total sobre el tiempo y, lo que es más importante, permite desactivar la animación para los usuarios que han configurado su sistema para reducir el movimiento.
Combina siempre la animación con un bloque @media (prefers-reduced-motion: reduce). Esta característica de medios detecta la configuración del sistema operativo que algunas personas activan para evitar el movimiento que puede causar malestar, y es la forma de satisfacer la preocupación de accesibilidad descrita anteriormente.
Ejemplo de efecto de parpadeo con animación CSS3:
Ejemplo de efecto de parpadeo con animación CSS
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
/* Turn the animation off for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.blink {
animation: none;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>El valor histórico text-decoration: blink (no lo uses)
Es posible que aún encuentres código antiguo que usa la palabra clave blink de la propiedad CSS text-decoration. Se muestra aquí únicamente para que puedas reconocerlo en páginas heredadas. No lo uses en proyectos nuevos.
La palabra clave blink de la propiedad text-decoration no forma parte de la especificación CSS y no es compatible con los navegadores modernos. Es puramente histórica y no tiene ningún efecto hoy en día.
Ejemplo de efecto de parpadeo con la propiedad CSS text-decoration (heredado):
Ejemplo de efecto de parpadeo creado con text-decoration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blink {
text-decoration: blink;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="blink">This text may blink depending on the browser you use.</p>
</body>
</html>Efecto de parpadeo con JavaScript
También puedes usar scripts para hacer parpadear el elemento.
Ejemplo de efecto de parpadeo con JavaScript:
Ejemplo de parpadeo con JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blink {
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
color: #1c87c9;
transition: 0.4s;
}
</style>
</head>
<body>
<p id="blink">Blinking Effect with JavaScript</p>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const blink = document.getElementById('blink');
let visible = true;
setInterval(function() {
visible = !visible;
blink.style.opacity = visible === true ? 1 : 0;
}, 1000);
});
</script>
</body>
</html>Temas relacionados
- Etiquetas HTML obsoletas — la lista completa de elementos que debes evitar, incluyendo
<blink>. - Etiqueta HTML marquee — otro elemento obsoleto basado en movimiento con los mismos problemas de accesibilidad.
- Elementos semánticos en HTML5 — escribe marcado significativo y accesible en lugar de trucos de presentación.
- CSS @keyframes y animación CSS — la forma moderna de animar.