HTML <blink> Blink Tag
Tags: learnhtml
Published: 2021-02-13 10:47:06

---
title: HTML <blink> Blink Tag
published: true
date: 2021-02-13 06:56:23 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-blink-tag/
---

Generally, **blinking** is nothing but light **flashing ON and OFF** in a regular or intermittent way. The **[HTML](https://sharepointanchor.com/category/learn-html/ "HTML") <blink> Blink tag** is a non-standard element used to **create a blinking text** that flashes slowly.

Note: The <blink> tag is a **deprecated in [HTML](https://sharepointanchor.com/category/learn-html/ "HTML")**, and it is **not available in HTML 5**.

The **<blink>** tag was used to **create a fancy text effect**  **on a webpage**. Also, it is used to show some special information and direction to catch the user’s eyes.

At the same time, most internet usage guidelines strongly advise **not to use blinking text**. Because it can cause **problems for disabled users** , and this effect is **annoying for users** to watch a part of text continuously turning ON and OFF.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

In [HTML](https://sharepointanchor.com/category/learn-html/ "HTML"), the blink tag contains both an **opening <blink> tag** and a **closing </blink> tag**. The content is written between these two tags.

```

<blink> Here is your text that has to blink </blink>

```

## Sample of HTML Blink Tag:

Here is a complete HTML example showing the working of the <[blink](https://en.wikipedia.org/wiki/Blink_element)> tag.

```

<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html>
<html>
  <head>
    <title>Blink tag</title>
    <style>
      blink {
        color: #C40655;
        font-size: 20px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Sample of HTML Blink tag</h1>
    <blink>The blink tag is forbidden in <a class="wpil_keyword_link" href="https://sharepointanchor.com/category/learn-html/" title="HTML" data-wpil-keyword-link="linked">HTML</a>. To attain this blinking effect you can use the CSS property.</blink>
  </body>
</html></pre>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-1-2.png)<figcaption>Result</figcaption>

## Use CSS Property for Blinking Effect:

You have an option to implement the blink feature, where the **browser will not support the blink element**. Let’s see the below examples.

### HTML code for Blinking Effect:

```

<span class="blink_me">Blinking Text</span>

```

### CSS code for Blinking Effect:

```

<style>
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}
</style>

```

Here, the **animation duration is 1s** , the **timing** is set to **linear**. That means it will be constant throughout. Finally, it defines **infinite** which means it will go on and on.

### Result:

From the below code, it will execute like this:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Code-result.gif)<figcaption>Result</figcaption>

### Example of Blinking Effect with CSS text-decoration Property:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Blinking Effect with CSS3 Animation</title>
    <style>
      .blink {
        text-decoration: blink;
        color: #C40655;
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="blink">This text may blink depending on your browser.</p>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-2-3.png)<figcaption>Result</figcaption>

The **Text-decoration property** is not part of the **[CSS](https://sharepointanchor.com/learn-css/)** specification and **not supported on most browsers**. You also have an alternative way to achieve the blinking effect. Just see the below example.

### Example of Blinking Effect with CSS3 Animation:

Here we can use the **CSS3 animation property** defined with the **@keyframes** rule to implement the blinking effect.

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
        animation: blinker 0.6s linear infinite;
        color: #C40655;
        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">Text with Blinking effect</p>
    <p class="blink blink-one">This is the CSS blinking effect for opacity starting with 0%</p>
    <p class="blink blink-two">This is CSS blinking effect for opacity starting with 100%</p>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result.gif)<figcaption>Result</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/b4j9gtwc/1/embed/html,result/"></script>

## Use JavaScript for Blinking Effect:

[**JavaScript**](https://sharepointanchor.com/learn-javascript/) can also become a good alternative to the HTML <blink> tag.

### Example of JavaScript Blinking Effect:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blink {
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
        color: #C40655;
        transition: 0.1s;
      }
    </style>
  </head>
  <body>
    <p id="blink">JavaScript Blinking effect.</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>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-3.gif)<figcaption>Result</figcaption>

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/browser-support-7.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <!– Comments –> Comments Tag](https://sharepointanchor.com/learn-html/html-comments-tag/)**
- **[HTML <address> Address Tag](https://sharepointanchor.com/learn-html/html-address-tag/)**
- **[HTML <a> Anchor Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/)**
- **[Learn CSS: Introduction & Basics](https://sharepointanchor.com/learn-css/learn-css-basics/)**

The post [HTML <code><blink></code> Blink Tag](https://sharepointanchor.com/learn-html/html-blink-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).