Etiqueta HTML <blink>
La etiqueta <blink> era un elemento HTML utilizado para crear texto parpadeante en una página web. Esta etiqueta fue obsoleta en HTML 4.0 y no es compatible con los navegadores modernos. Fue ampliamente considerada una mala elección de diseño y a menudo se asociaba con una mala experiencia de usuario.
Dado que la etiqueta <blink> ya no se utiliza, se recomienda lograr efectos similares mediante CSS o JavaScript. Sin embargo, ten en cuenta que el contenido que parpadea o cambia rápidamente puede resultar molesto o distraer a los usuarios y podría no cumplir con las pautas de accesibilidad.
peligro
La etiqueta
<blink>es una etiqueta HTML obsoleta. Aunque algunos navegadores aún pueden tener soporte para<blink>, se está en proceso de eliminarla. No utilices este elemento, de lo contrario, tus páginas podrían romperse. En su lugar, puedes usar CSS y JavaScript para crear un efecto de parpadeo.
Ejemplo de código HTML <blink>:
Ejemplo de la 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
Otra forma de lograr el efecto de parpadeo es utilizar la animación de CSS3 con la regla @keyframes.
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;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>peligro
Sin embargo, la palabra clave
blinkde la propiedadtext-decorationno forma parte de la especificación de CSS y no es compatible con la mayoría de los navegadores.
Una forma alternativa de lograr el efecto de parpadeo es utilizar la palabra clave blink de la propiedad CSS text-decoration.
Ejemplo de efecto de parpadeo con la propiedad CSS text-decoration:
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 utilizar scripts para hacer que el elemento parpadee.
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() {
var blink = document.getElementById('blink');
setInterval(function() {
blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
}, 1000);
});
</script>
</body>
</html>Práctica
¿Cuál es el comportamiento y el estado de la etiqueta HTML <blink>?