X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML <Blink> Tag

The HTML <blink> tag is a non-standard element used to create an enclosed text, which flashes slowly. General blink meaning is light flashing on and off in a regular or intermittent way. 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> is a deprecated HTML tag. Though some browsers may still have <blink> support, it is in the process of being dropped. Do not use this element otherwise your pages may be broken. You can use CSS and JavaScript instead to create a blink effect.

Example of HTML <blink> code:

<!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>
    <title>Title of the document</title>
    <style>
      .blink {
      animation: blinker 0.6s linear infinite;
      color: #1c87c9;
      font-size: 30px;
      font-weight: bold;
      font-family: sans-serif;
      }
      @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>
    <p class="blink">Blinking text</p>
    <p class="blink blink-one">CSS blinking effect for opacity starting with 0%</p>
    <p class="blink blink-two">CSS blinking effect for opacity starting with 100%</p>
  </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 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>
  <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



Do you find this helpful?

Related articles