The <blink>
tag was an HTML element used to create blinking text on a webpage. This tag was deprecated in HTML 4.0 and is not supported by modern browsers. It was widely considered to be a bad design choice and was often associated with poor user experience.
Since the <blink>
tag is no longer in use, it is recommended to achieve similar effects using CSS or JavaScript. However, keep in mind that blinking or rapidly changing content can be annoying or distracting to users and may not comply with accessibility guidelines.
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 <blink> Element </h1>
<blink>The <blink> 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>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>
An alternative way to attain the blinking effect you can use CSS3 animation property defined with @keyframes rule.
Example of blinking effect with the 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>
<body>
<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
✕ | ✕ | ✕ | ✕ | ✕ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.