- <hr> tag
- <nav> tag
- <pre> tag
- Anchor tag
- Article tag
- Attributes
- Audio tag
- Blink tag
- Block elements
- Blockquote
- Bold
- Buttons
- Center text
- Comment
- Data attribute
- Div
- Entities
- Font color
- Font size
- Footer
- Form
- Global attributes
- iFrame
- Images
- Inline elements
- Inline style attribute
- Input element
- Italic
- Label
- Line break
- Linking local webpages
- Links
- Marquee tag
- Metadata
- Ordered lists
- Paragraph tag
- Script tag
- Select
- Semantic elements
- Space
- Span tag
- Strikethrough
- Style tag
- Table
- Textarea
- Underline
- Unordered lists
- Video tag
HTML
Blink Tag in HTML: Syntax, Usage, and Examples
The blink tag in HTML once created flashing text that grabbed attention through animation. Although not officially supported in HTML standards and now obsolete in modern browsers, the <blink>
element remains a curiosity in web history. Understanding how it worked—and how to recreate its effect today—can help you improve your grasp of HTML behaviors, styling practices, and better alternatives.
How to Use the Blink Tag in HTML
Originally, the syntax for the blink tag in HTML was simple. You wrapped your desired text in the <blink>
and </blink>
tags like this:
<blink>This text will blink.</blink>
The browser would render the enclosed text in a blinking animation. However, only a few early browsers—like Netscape Navigator—ever supported it. As standards evolved and accessibility concerns grew, support for HTML blink tags disappeared.
If you type this into a modern browser today, the text won’t blink. It will render like normal static text because most modern engines simply ignore the <blink>
tag.
When to Use the Blink Tag in HTML (And Why You Shouldn't)
There are very few—if any—practical reasons to use the blink tag today. Here’s why:
- Lack of support: It doesn’t work in any modern browser.
- Accessibility issues: Flashing or blinking elements can cause problems for users with epilepsy or other visual disorders.
- Poor user experience: Blinking text distracts rather than informs. It often feels like an outdated web gimmick.
That said, you might encounter the blink tag HTML in one of the following situations:
Preserving Legacy Code
Some old web pages still use HTML blink tags. If you’re maintaining or converting those pages, knowing what the tag did can help you replace it with a modern equivalent.
Learning and Experimentation
If you're learning HTML and want to explore deprecated tags, experimenting with <blink>
offers insight into how HTML evolved over the decades.
Simulating Blink Behavior
While you shouldn’t use the blink tag anymore, you can recreate the blinking effect with CSS or JavaScript for a more standards-compliant approach (and with caution).
Examples of the Blink Tag in Action (Then and Now)
Deprecated HTML Blink Tag Example
<blink>This used to blink!</blink>
As mentioned, this tag won't have any effect in current browsers. Instead, use CSS to create blinking or flashing effects.
CSS Equivalent of the Blink Effect
You can replicate blinking using keyframe animations in CSS:
<style>
.blink {
animation: blink-animation 1s steps(2, start) infinite;
-webkit-animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
</style>
<p class="blink">This text blinks using CSS!</p>
This method is more reliable and widely supported.
JavaScript-Based Blinking Text
You can also use JavaScript to toggle text visibility repeatedly:
<p id="jsBlink">This text will blink with JS.</p>
<script>
setInterval(() => {
const el = document.getElementById("jsBlink");
el.style.visibility = el.style.visibility === "hidden" ? "visible" : "hidden";
}, 500);
</script>
This technique gives you more control over the blinking speed and behavior.
Learn More About HTML Blink Tags
The History of HTML Blink Tags
The <blink>
tag was first introduced in early Netscape browsers during the 1990s. Its purpose was to draw attention to text, often in a jarring and animated way. It was never included in any official HTML specification and remained a proprietary feature. Over time, developers started to recognize the issues associated with blinking content, and browsers gradually dropped support.
Eventually, standards bodies like the W3C discouraged the use of any HTML tag for blinking text. In fact, the W3C’s recommendation has always been to use CSS or JavaScript for any dynamic or animated content.
Accessibility and Usability Concerns
Blinking text poses several risks and issues:
- Accessibility: Flashing content can cause seizures in people with photosensitive epilepsy.
- Distraction: Users may find blinking elements annoying or difficult to read.
- Mobile issues: On smaller screens, rapidly blinking text becomes harder to process and more visually disruptive.
Because of these concerns, accessibility guidelines recommend avoiding animations that blink more than three times per second or cannot be paused by the user.
HTML Tag for Blinking Text Today
There is no official HTML tag for blinking text in modern standards. If you want to highlight content or draw attention, you should consider safer and more user-friendly alternatives:
- Use bold or italic styles: Emphasize important words without animation.
- Use contrasting colors or background colors: Draw attention visually without motion.
- Use animation with clear purpose and control: If animation is truly needed, provide a way for users to pause or disable it.
Simulating Legacy Look Without Functional Blink
If you're building a retro-themed website and want to include blinking text as part of the aesthetic—but don’t need it to actually blink—you could style it to appear retro without animation:
<span style="color: red; font-family: 'Courier New', monospace; text-decoration: underline dotted;">
[BLINKING TEXT]
</span>
This provides the feel of blinking text in HTML without creating movement.
Best Practices for Highlighting Text in Modern HTML
Instead of using outdated tags like <blink>
, modern developers follow these techniques:
Emphasizing Text with Semantic Tags
<strong>Important message:</strong> Please read before continuing.
This uses semantic HTML and improves accessibility for screen readers.
Highlighting with Background Color
<span style="background-color: yellow;">Highlight this sentence.</span>
This stands out without animation or motion.
Animating with CSS Transitions
You can animate font color or background color instead of blinking:
<style>
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
color: black;
}
50% {
color: red;
}
100% {
color: black;
}
}
</style>
<p class="pulse">This text pulses instead of blinking.</p>
This is smoother, less jarring, and more visually refined.
Using the blink tag in HTML is no longer a practical or recommended technique, but knowing about it can help you understand web development’s history and how styling techniques have improved. You can now achieve more accessible, responsive, and flexible designs using modern CSS and JavaScript.
So, while <blink>
had its moment, it’s better left in the past. Whether you’re maintaining old code, experimenting with retro designs, or trying to simulate old-school web behavior, you now know how the blink tag HTML worked, why it faded out, and what to use instead.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.