HTML <Blink> Tag

The <blink> tag was an HTML element used to create blinking text on a webpage. This tag was deprecated in HTML 4.0 and is not supported by modern browsers. It was widely considered to be a bad design choice and was often associated with poor user experience.

Since the <blink> tag is no longer in use, it is recommended to achieve similar effects using CSS or JavaScript. However, keep in mind that blinking or rapidly changing content can be annoying or distracting to users and may not comply with accessibility guidelines.

HTML blink tag

The <blink> is a deprecated HTML tag. Though some browsers may still have <blink> support, it is in the process of being dropped. Don't use this element, otherwise, your pages can be broken. You can use CSS and JavaScript instead to create a blink effect.
<!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 JavaSrcipt. See examples in the next section.</blink>
  </body>
</html>

Blinking Effect with CSS

Another way to accomplish the blink effect was to use set the blink keyword of CSS text-decoration property.

Example of blinking effect with CSS3 animation:

<!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>
However, the blink keyword of the text-decoration property is not part of the CSS specification and not supported on most browsers.

An alternative way to attain the blinking effect you can use CSS3 animation property defined with @keyframes rule.

Example of blinking effect with the CSS text-decoration property:

<!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>

Blinking Effect with JavaScript

You can also use scripts to make the element blink.

Example of blinking effect with 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">
      var blink = document.getElementById('blink');
      setInterval(function() {
        blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
      }, 1000);
    </script>
  </body>
</html>

Browser support

chrome edge firefox safari opera

Practice Your Knowledge

What is the behavior and status of the HTML <blink> tag?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?