If you’ve ever seen old websites with flashing or blinking text, you might be wondering how they did it. The secret was a small HTML tag known as the <blink> tag. Today, it’s mostly outdated but people still search for “blink HTML” because they want to create a blinking text effect for fun, learning, or basic attention-grabbing elements.

In this beginner-friendly tutorial, let’s understand what the blink HTML effect is, how it was originally used, and most importantly how you can recreate the blinking effect using modern, valid HTML, CSS, and JavaScript.

What Is the <blink> HTML Tag?

The <blink> tag was introduced in early web browsers like Netscape Navigator. Anything wrapped inside the tag would blink on and off automatically.

Example:

<blink>This text will blink!</blink>

Sounds simple, right?

Unfortunately, most modern browsers no longer support this tag. It’s considered obsolete and doesn’t work in Chrome, Edge, Safari, or Firefox.

But don’t worry you can still create a blinking effect using modern methods.

Why the <blink> Tag Was Deprecated

Web designers and browser developers stopped supporting the <blink> tag for a few reasons:

• It reduced readability
• It caused accessibility issues
• It could annoy visitors
• It didn’t fit modern design practices

However, blinking text can still be useful for warnings, temporary notices, or simple highlights as long as you use it responsibly.

How to Create a Blink Effect Without the <blink> Tag

Below are three easy and modern ways to recreate blink HTML effects.

1. Blink Text Using CSS Animation (Recommended)

CSS animations are simple, clean, and widely supported.

Example Code:

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

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

<p class="blink">This text will blink using CSS!</p>

This method works in all modern browsers and keeps your HTML valid.

2. Blink Using JavaScript

If you want more control, like custom timing or conditional blinking, JavaScript is useful.

Example Code:

<p id="blinkText">Blinking with JavaScript!</p>

<script>
setInterval(() => {
  const text = document.getElementById("blinkText");
  text.style.visibility = 
    (text.style.visibility === "hidden") ? "visible" : "hidden";
}, 500);
</script>

This creates a smooth blinking effect by toggling visibility every 0.5 seconds.

3. Blink Using CSS + Class Toggle (Cleaner JS Method)

You can also mix CSS and JavaScript for cleaner code.

CSS:

<style>
.hide {
  opacity: 0;
}
</style>

JavaScript:

<p id="alert">Attention! This is blinking text.</p>

<script>
setInterval(() => {
  document.getElementById("alert").classList.toggle("hide");
}, 600);
</script>

This method is neat because the styling stays in CSS while JavaScript handles only the logic.

When Should You Use Blink Effects?

Blinking text should not be used everywhere.
Use it only for:

1. Important alerts
2. Temporary highlights
3. UI signals
4. Notifications

And avoid using it on:

1. paragraph text
2. headers
3. product descriptions
4. long-form content

Because readability always wins over fancy effects.

Conclusion

The old blink HTML tag doesn’t work anymore. However, you can still create a blinking effect easily by using CSS or JavaScript. This way, you get the same visual impact while keeping your code modern and browser-friendly. Moreover, these methods let you highlight alerts, draw attention, or add small visual effects without hurting readability or website performance.