There are various standard and non-standard elements of HTML, and many elements are not officially declared as a part of standard HTML. You might have seen on websites that some text flickers and tells you something special. In this tutorial, you will learn to make flickering text using a unique HTML tag.
Blink Tag in HTML
The HTML blink tag is a non-standard element of HTML that helps to flash or gently blink a text or set of text in a web browser; as you all might know, Blink means turning on and off any light in a regular pattern or within a fixed time interval. Usually, text blinking is not always used because it becomes annoying for the users or viewers to see the flashing of text continually.
This tag has become depreciated, but some browsers still support this blink feature. For example, the blink feature is supported by Netscape version 5.0. It is advised not to use the Blink Tag because if the browser does not support it, then chances are your page might get broken. As an alternative, web developers can use CSS along with JavaScript to create a blink effect on texts.
Typically, this tag was used to create a fancy text effect on a webpage. Also, it was used to show some special offers or certain information and direction to catch the audience's eyes.
Like other HTML tags, it is a container tag, and all the texts written within this tag will get the blink effect.
Syntax:
<blink> Here is your text that has to blink. </blink>Here is a complete HTML script showing the working of Blink:
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Here is an example of Blink Element of HTML </title>
<style>
blink {
color: #2d38be;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<h1> About HTML BLINK Tag</h1>
<blink> HTML blink tags are not used these days and are not supported by most browsers. It probably won't work on your current browser. </blink>
<p> See the effect above </p>
</body>
</html>You also have an option to implement the Blink feature, where the browser will not support the Blink element. Use CSS animation property (animation: blink 2s ease infinite;). Now, you have to make sure that the style has been implemented and functional to all the text sections that you have used within the HTML, like <P>, <SPAN>, <DIV>, etc. Nowadays, this is a common approach to use the style and embed the text-decoration with blink value. Associating the SPAN tag with it is considered the right solution because it does not augment any other structuring to your text.
Use JavaScript for Blinking
JavaScript can also become an excellent alternative to the HTML blink tag. Here is a code snippet showing its usage.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Blinking feature using JavaScript </title>
<style>
#blink {
font-size: 20px;
font-weight: bold;
color: #2d38be;
transition: 0.5s;
}
</style>
</head>
<body>
<p id="blink"> This is an example of blinking text using JS. </p>
<script type="text/javascript">
var blink = document.getElementById('blink');
setInterval(function() {
blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
}, 1500);
</script>
</body>
</html>Use CSS for Blinking
It is easiest to make blinking text using CSS. It has the @keyframes rule, which changes the current style to a new one in a specific time frame and repeats it.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Blinking feature using CSS</title>
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<p class="blink"> This is an example of blinking text using CSS. </p>
</body>
</html>