HTML Blink Tag
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 flicker and tells you something special. In this tutorial, you will learn how to make a flickering text using a unique HTML tag.
Table of Contents
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 that Blink means turning on and off any light in a regular pattern or within a fixed time interval. Usually, the blinking of text is not always used because it becomes annoying for the users or viewers to continually see the flashing of text.
This tag has become depreciated, but there are still some browsers that 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 special information and direction to catch the audience’s eyes.
It is a container tag, like other HTML tags, 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>
<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 if you want 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 to be implemented and functional to all the text section that you have used within the HTML, like <P>, <SPAN>, <DIV>, etc. This is nowadays 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 a good alternative to HTML Blink Tag. Here is a code snippet showing the use of it.
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>