<Blink> Tag in HTML

Introduction

The <blink> tag was once used to create blinking text on webpages, but it's considered outdated and not supported by modern browsers. It's recommended to achieve similar effects using CSS for better user experience. Do you know how to blink in HTML?

In this article, we will discuss the <blink> tag element in HTML. We will learn what it is and how we can use it on our web pages or websites with some exciting examples. So, let's get started.

The <blink> element is used to give a flash effect on the text in HTML. Let us understand its syntax.

Syntax of <blink> Tag

The syntax of <blink> element is:

<blink>
<!--Text Here-->
</blink>

Attributes of <blink> Tag

The <blink> tag doesn't have any specific attributes. It's a standalone HTML element used to make text flash or blink. However, it's deprecated in HTML5 due to accessibility and usability concerns.

How to Use <blink> Tag in HTML?

To use the <blink> tag in HTML, simply wrap the text you want to make blink within <blink> and </blink> tags. However, it's important to note that the <blink> tag is deprecated in HTML5 and not supported in modern browsers, so its usage is discouraged.

Let us understand <blink> element with an example.

Example

Here is an example using the blink HTML element.

<html>
<head>
    <title>Coding Ninjas Blink HTML element</title>
</head>
<body>
    <h1>Hello Ninjas, Here is the example of blink HTML element.</h1>
    <h3>This is a <blink>blinking text.</blink></h3>
</body>
</html>

Output

After a blink, you will see this:

The <blink> element is no longer supported in modern browsers. It is considered an outdated and deprecated feature. This is because blinking text can be distracting and annoying to users, especially those with photosensitive epilepsy or other visual sensitivities. So above mentioned code with <blink> element can only work in HTML 3.2.

But if you want to use the blinking effect in HTML 5 on a webpage or website, then there are many different ways to do so. Let us discuss them one by one.

Why <blink> Element is Not Supported in HTML 5?

The <blink> element is not supported in HTML5 due to concerns regarding usability and accessibility. It was deprecated because blinking text can be distracting and irritating for users, potentially causing accessibility issues for individuals with visual impairments or cognitive disabilities. Additionally, it interferes with user experience and readability on web pages. HTML5 encourages the use of CSS animations or JavaScript for dynamic effects, providing more control over timing, behavior, and accessibility, while discouraging deprecated and non-standard elements like <blink>.

How to Use Blink Effect in HTML 5?

There are different ways to add the blink effect to your webpage.

Using CSS Animations for Blinking

By using CSS animations, we can create a blink effect. We can create a blink effect by using keyframes. Keyframes are used to define specific stages during animation or transition. They are essentially markers that indicate the state of an element at a particular point in time.

A keyframe is defined using the @keyframes rule in CSS. It is followed by a name for the animation. The name can then be referenced using the animation-name property.

Let us see an example of CSS animations to recreate the blink effect.

<html>
<head>
    <title>Coding Ninjas Blink HTML element</title>
</head>
<style>
    body{
        background: #0047AB;
        font-family: 'Mulish';
    }
    h2, h1 {
        color: white;
    }
    h3{
        color:yellow;
    }
    #usingCSSBlink {
        color: orange;
        animation: blinking-usingCSSBlink 1s linear infinite;
    }
    @keyframes blinking-usingCSSBlink {
    50% {
            opacity: 0;
        }
    }
    #usingCSSBlinkColor{
        color: white;
        animation: blinking-usingCSSBlinkColor 1s linear infinite;
    }
    @keyframes blinking-usingCSSBlinkColor {
    20% {
    color: red;
    }
    80%{
    color: white;
    }
}
</style>
<body>
    <h2>World has enough coders</h2>
    <h1>Be a <span id="usingCSSBlink">Coding Ninja</span></h1>
  <h3>Don't worry dear,<span id="usingCSSBlinkColor"> when Coding Ninjas is here.</span></h3>
</body>
</html>

Output

As you can see in the above output, the word “Coding Ninja” disappears, and the “when Coding Ninjas is here.” color changes to red.

Using Javascript for Blinking

By using Javascript, we can create a blink effect. We can create a blink effect by using the setInterval() function. We can change the visibility of an element at regular intervals using the setInterval() function. Let us see an example of Javascript to recreate the blink effect.

<html>
<head>
    <title>Coding Ninjas Blink HTML element</title>
</head>
<script>
    function blinkTextUsingJS() {
        var blinkEffect = document.getElementById('usingJavascriptBlink');
        setInterval(function() {
            blinkEffect.style.visibility = (blinkEffect.style.visibility == 'hidden' ? '' : 'hidden');
        }, 2000);
    }
</script>
<style>
    body{
        background: #0047AB;
        font-family: 'Mulish';
    }
    h2, h1 {
        color: white;
    }
    #usingJavascriptBlink {
        color: orange;
    }
</style>
<body onload="blinkTextUsingJS()">
    <h2>World has enough coders</h2>
    <h1>Be a <span id="usingJavascriptBlink">Coding Ninja</span></h1>
</body>
</html>

Output

Here we have given a 2000ms delay for the word “Coding Ninja”. You will see after 2000ms:

<Blink> Tag Element Support

The <blink> element was first introduced in HTML version 2.0. It was also present in HTML versions 3.2 and 4.01. However, it is no longer supported in HTML5.

The blink HTML element caused the enclosed text to blink on and off repeatedly. This was often considered a distracting and annoying effect. As a result, it was deprecated. It was eventually removed from the HTML standard. Web developers are encouraged to use alternative methods to achieve desired visual effects.

The blink HTML element was deprecated. It is not included in HTML5 for a few reasons:

Accessibility: Blinking text can cause problems. It can cause problems for people with certain neurological conditions, such as epilepsy or migraines. It can also be distracting or annoying for some users.
Usability: Blinking text can be challenging to read. It is mainly difficult for users with visual impairments. It can also be confusing if the text is meant to be read and understood quickly.
Design: Blinking text is generally considered to be outdated and unprofessional. It is rarely used in modern web design. It can make a website appear outdated or poorly designed.

Web Browser Support

Most modern web browsers do not support the blink HTML element. It has been deprecated and removed from the HTML standard. Some older web browsers may still support the blink HTML element. It depends on their version and implementation.

Internet Explorer (up to version 11), Opera (up to version 12), and some older versions of Firefox and Chrome were among the browsers that supported the "blink" element.

Frequently Asked Questions

Does the <blink> tag still exist?

The <blink> HTML tag is considered deprecated and not supported in modern web browsers. It was officially removed from the HTML specification, and its usage is discouraged. Most major web browsers, such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari, do not support the <blink> tag.

Why was the blink element deprecated in HTML?

The blink element was deprecated because it can cause problems. It can create problems for people with certain neurological conditions, such as epilepsy or migraines.

Which browsers support the blink element in HTML?

The tag, which was widely considered a bad design choice and associated with poor user experience, was deprecated in HTML 4.0 and is not supported by modern browsers.

Should we use the blink element on our website?

No, we should not use the blink element on your website. It is generally not recommended, as it can cause accessibility, usability, and design issues.

Conclusion

In this article, we have discussed the <blink> tag in HTML. While the <blink> tag may have once been a playful and attention-grabbing feature in early HTML, its deprecation in HTML5 signifies a shift towards more user-friendly and accessible web design practices. As web development evolves, it's important to prioritize usability, readability, and inclusivity for all users. Instead of relying on deprecated tags like <blink>, developers are encouraged to utilize modern techniques such as CSS animations and JavaScript to achieve similar effects while ensuring a positive user experience across different devices and accessibility needs. You can check out our other blogs on HTML:

We hope this article helped you to understand the blink HTML element. You can read more such articles on our platform, Code 360. You will find articles on almost every topic on our platform. Also, you can practice coding questions at to crack good product-based companies. For interview preparations, you can read the Interview Experiences of popular companies.

Happy Coding!

Introduction

Syntax of <blink> Tag

Attributes of <blink> Tag

How to Use <blink> Tag in HTML?

Example

Why <blink> Element is Not Supported in HTML 5?

How to Use Blink Effect in HTML 5?

Using CSS Animations for Blinking

Using Javascript for Blinking

<Blink> Tag Element Support

Web Browser Support

Frequently Asked Questions

Does the <blink> tag still exist?

Why was the blink element deprecated in HTML?

Which browsers support the blink element in HTML?

Should we use the blink element on our website?

Conclusion