W3docs
es
Iniciar sesión

Etiqueta HTML <blink>

Blink is a deprecated HTML tag. It was used in the HTML document to make text flash. To attain the blinking effect, you can also use CSS styles or Javascript. See examples.

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.

HTML blink tag

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 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 &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
  </body>
</html>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

peligro

Sin embargo, la palabra clave blink de la propiedad text-decoration no 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>
Pruébalo tú mismo »

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>
Pruébalo tú mismo »

Práctica

Práctica

¿Cuál es el comportamiento y el estado de la etiqueta HTML &lt;blink&gt;?