HTML <blink> Tag

The <blink> tag is a non-standard element used to create an enclosed text, which flashes slowly. Blinking effect is used very rarely, as it is quite annoying for users to watch a piece of text constantly turning on and off.

The <blink> tag is obsolete. Though some browsers may still support it, it is in the process of being dropped. Do not use this element, otherwise your pages may be broken.

Syntax

The <blink> element comes in pairs; the content must be written between opening (<blink>) and closing (</blink>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>The &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is obsolete. To attain blinking effect you should use CSS or JavaSrcipt. See examples in the next section.</blink>
  </body>
</html>

Blinking Effect with CSS

To attain blinking effect you can use CSS3 animation property defined with @keyframes rule.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blink {
        animation: blinker 0.6s linear infinite;
        color: #1c87c9;
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
       .blink-one {
         animation: blinker-one 1s linear infinite;
       }
       @keyframes blinker-one {  
         0% { opacity: 0; }
       }
       .blink-two {
         animation: blinker-two 1.4s linear infinite;
       }
       @keyframes blinker-two {  
         100% { opacity: 0; }
       }
    </style>
  </head>
  <body>
    <h3>
      <blink>Blinking text</blink>
    </h3>
    <span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
    <p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
  </body>
</html>

The text in the given example fades out and then appear back. You can play around with CSS code to change the look and feel of the flashing text.

Blinking Effect with JavaScript

You can also use scripts to make the element blink.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <script type="text/javascript">
      function blink() {
        var blinks = document.getElementsByTagName('blink');
        for (var i = blinks.length - 1; i >= 0; i--) {
          var s = blinks[i];
          s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
        }
        window.setTimeout(blink, 1000);
      }
      if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
      else if (window.addEventListener) window.addEventListener("load", blink, false);
      else if (window.attachEvent) window.attachEvent("onload", blink);
      else window.onload = blink;
    </script>
    <blink style="color: #1c87c9;">Blinking Effect with JavaScript</blink>
  </body>
</html>

In the above-mentioned example the script is set to hide the text when it appears, and make it appear when it disappears, thus achieving blinking effect.

Browser support