HTML <blink> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand legacy blinking text markup and how to create accessible animation effects with CSS.

What Was the <blink> Tag?

The <blink> element was a Netscape Navigator extension that made enclosed text blink on and off. It was popular in the 1990s for sales banners and urgent alerts, but was never added to the HTML specification.

Firefox removed native blink support in 2013. Other browsers never fully adopted it. Learn the tag for web history; animate text with CSS in all new work.

.alert {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .alert { animation: none; }
}

📝 Syntax (Historical)

Wrap text between opening and closing <blink> tags:

<blink>Your Blinking Text Here</blink>

• <blink> is an inline element—it nested inside paragraphs and headings.
• No tag-specific attributes existed; the blink effect was automatic in supporting browsers.
• Modern browsers render the text as plain content with no blinking behavior.

⚖️ <blink> vs CSS Animation

CSS gives you full control over timing, easing, and accessibility that the legacy tag never offered:

Examples Gallery

Historical blink patterns plus the modern CSS replacement. Native blink does not work in modern browsers—demos use CSS animation to show the historical effect.

<p>Blinking: <blink>Your Blinking Text Here</blink></p>

<p>
  <blink>Limited Time Offer!</blink>
  Get 50% off all items today only.
</p>

<style>
  .pulse-alert {
    animation: pulse-text 1.5s ease-in-out infinite;
    color: #b91c1c;
    font-weight: 700;
  }
  @keyframes pulse-text {
    50% { opacity: 0.4; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pulse-alert { animation: none; }
  }
</style>
<p><span class="pulse-alert">Limited Time Offer!</span> Get 50% off.</p>

♿ Accessibility

Blinking text creates serious accessibility problems:

• Motion sensitivity — flashing text can trigger dizziness or nausea (vestibular disorders)
• WCAG guidelines — avoid content that flashes more than 3 times per second
• prefers-reduced-motion — always disable animations when users request reduced motion
• Better alternatives — use bold text, color, or icons instead of blinking

💡 Best Practices