<blink> - Blinking Text (Deprecated)

The <blink> Element

Deprecated Non-standard Netscape Only

Never Use This Element

The <blink> element was deprecated and removed from all browsers. It never became part of any HTML standard and should never be used in modern web development.

The <blink> element was a non-standard HTML element created by Netscape Navigator that caused text to blink on and off repeatedly. It became one of the most notorious and disliked elements in web history, representing the excessive and accessibility-hostile design patterns of the early web.

Historical Context

The Browser Wars Legend

The <blink> element has an infamous origin story from the mid-1990s browser wars between Netscape and Microsoft. According to web development folklore, the element was created during a night of drinking at a bar where Netscape engineers were brainstorming new features. Lou Montulli, one of the engineers, jokingly suggested a blinking text feature, which was later implemented as a prank by another engineer.

The element was introduced in Netscape Navigator 2.0 in 1995 as a competitor to Microsoft Internet Explorer’s <marquee> element. Both elements became symbols of the browser wars era, where competing browsers added proprietary features to gain market advantage.

Cultural Impact

The <blink> element quickly became a symbol of amateur web design and was widely overused on personal homepages throughout the late 1990s. Its widespread abuse contributed to:

• The development of ad blockers and user stylesheets
• Industry discussions about web standards and accessibility
• CSS specifications that explicitly allowed browsers to ignore blink values
• A lasting cultural memory as one of the worst HTML elements ever created

Syntax

<blink>This text would blink on and off</blink>

The element took no attributes and simply caused all content within it to repeatedly appear and disappear.

Note

This element will not work in any modern browser. The code above is shown purely for historical reference and educational purposes.

Example (Historical Reference)

HTML

<!-- This will NOT work in modern browsers --> <p>Normal text here.</p> <blink>This text was supposed to blink!</blink> <p>More normal text.</p> <!-- The element had no effect on nested content behavior --> <blink> Blinking text with <strong>bold emphasis</strong> </blink>

Result ▶ Run

The above code will render as normal static text in all modern browsers. In Netscape Navigator, the text would have flashed on and off approximately once per second.

Why It’s Deprecated

The <blink> element was deprecated and removed for multiple critical reasons:

1. Accessibility Violations

Blinking content creates severe accessibility problems:

Seizure Risk: Flashing content can trigger photosensitive epileptic seizures in susceptible individuals. The element provided no way to control the blink rate, making it particularly dangerous.

Screen Reader Issues: Screen readers would read blinking text normally, but the visual blinking created a disconnect between what was heard and what sighted users experienced.

Cognitive Disabilities: People with attention deficit disorders, autism spectrum disorders, or cognitive disabilities found blinking text extremely distracting and difficult to read.

Reading Comprehension: The constant blinking disrupted reading flow and made it nearly impossible to read the blinking text comfortably.

2. User Experience Problems

Beyond accessibility, the element created numerous UX issues:

Annoyance Factor: Blinking text was universally regarded as annoying and unprofessional, often driving users away from websites.

No User Control: Users had no way to stop the blinking without using custom stylesheets or browser extensions.

Printing Problems: Blinking elements caused issues when users tried to print web pages, as browsers had to decide whether to print the element in its visible or invisible state.

3. Technical Limitations

No Standardization: The element was never part of any W3C HTML specification, making it a proprietary feature that only worked in Netscape browsers.

Performance Impact: On older computers, multiple blinking elements could impact browser performance and rendering speed.

Lack of Control: There was no way to adjust the blink rate, duration, or number of repetitions through HTML attributes.

Modern Alternatives

CSS Animation (Strongly Discouraged)

While technically possible to recreate blinking effects with CSS, this is strongly discouraged for all the same accessibility and usability reasons that led to the deprecation of the original element.

Do Not Recreate This Effect

Creating blinking text effects violates WCAG accessibility guidelines and creates a poor user experience. The following example is shown only to demonstrate the technical equivalent, not to encourage its use.

CSS Animation

/* DO NOT USE: Violates accessibility guidelines */
.blink-effect {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

HTML

<!-- DO NOT USE: Accessibility violation -->
<span class="blink-effect">Blinking text</span>

HTML

<style> .blink-example { animation: blink 1s step-start infinite; } @keyframes blink { 50% { opacity: 0; } } .warning { color: #d97706; font-weight: bold; margin-bottom: 1rem; } </style> <p class="warning">⚠️ This effect violates accessibility guidelines</p> <p class="blink-example">This text blinks (but shouldn't)</p>

Result ▶ Run

Recommended Alternatives

Instead of blinking text, use modern, accessible methods to draw attention:

1. Color and Contrast

Use color strategically to highlight important information:

<p>Your payment is <strong class="highlight">overdue</strong>.</p>

.highlight {
  color: #dc2626;
  font-weight: bold;
}

2. Icons and Badges

Use visual indicators that don’t move:

HTML

<style> .badge { display: inline-block; padding: 0.25rem 0.5rem; background: #dc2626; color: white; border-radius: 0.25rem; font-size: 0.875rem; font-weight: bold; } .icon-alert { color: #dc2626; font-size: 1.25rem; vertical-align: middle; } </style> <p><span class="icon-alert">⚠</span> Important notification</p> <p>Status: <span class="badge">URGENT</span></p>

Result ▶ Run

3. Subtle CSS Transitions

If you need to draw temporary attention, use a single, gentle animation:

HTML

<style> .gentle-pulse { animation: pulse 2s ease-in-out 3; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .notification { padding: 1rem; background: #fef3c7; border-left: 4px solid #f59e0b; margin: 1rem 0; } </style> <div class="notification gentle-pulse"> New message received </div> <p>This gentle pulse runs 3 times then stops.</p>

Result ▶ Run

4. Static Emphasis Elements

Use semantic HTML elements designed for emphasis:

HTML

<p>This is <strong>strongly important</strong> information.</p> <p>This text has <em>emphasis</em> placed on it.</p> <p>This is <mark>highlighted for reference</mark>.</p>

Result ▶ Run

Accessibility Guidelines

WCAG Requirements

The Web Content Accessibility Guidelines explicitly address flashing content:

WCAG 2.3.1 (Level A): Web pages must not contain anything that flashes more than three times in any one-second period, or the flash is below the general flash and red flash thresholds.

WCAG 2.2.2 (Level A): For any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be a mechanism for users to pause, stop, or hide it.

The <blink> element violated both of these guidelines by:

• Flashing continuously without user control
• Providing no pause or stop mechanism
• Having no way to control flash rate or intensity

User Preferences

Modern web development respects user preferences:

/* Respect prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

This CSS ensures that users who have requested reduced motion in their operating system preferences won’t see any animations, including any blink-like effects.

Historical Browser Support

Browser	Support Period	Notes
Netscape Navigator	2.0 - 4.8 (1995-2003)	Original implementation
Firefox	1.0 - 22 (2004-2013)	Inherited from Netscape, removed in v23
Opera	2.0 - 12.1 (1996-2012)	Supported for compatibility
Internet Explorer	Never	Microsoft never implemented this element
Chrome	Never	Did not support blinking
Safari	Never	Did not support blinking

Note

Even browsers that technically supported the element often allowed users to disable it through preferences, and many users did exactly that.

CSS Blink Value

The CSS 2.1 specification included a text-decoration: blink value but explicitly stated that browsers were allowed to ignore it:

/* CSS blink value - also obsolete */
.blink-css {
  text-decoration: blink; /* Browsers may ignore this */
}

Most browsers chose to ignore this value, and it was removed from CSS3 specifications entirely.

Related Elements

Use strong importance to emphasize text properly without blinking.

Use emphasis for stress emphasis without visual annoyance.

Highlight text for reference or relevance without animation.

Another deprecated element from the browser wars era that scrolled text.

Specifications

Status: Never standardized

The <blink> element was never part of any official HTML specification:

• Not in HTML 2.0 (1995)
• Not in HTML 3.2 (1997)
• Not in HTML 4.01 (1999)
• Not in XHTML (2000)
• Not in HTML5 (2014)

The element existed only as a proprietary Netscape extension. The W3C HTML5 specification explicitly lists <blink> as a non-conforming feature.

Historical References

• Mozilla Developer Network: Deprecated Features
• W3C HTML5 Specification: Non-conforming Features
• WHATWG HTML Living Standard

Lessons Learned

The <blink> element serves as an important lesson in web development history:

1. Accessibility Must Come First: Features that seem fun or attention-grabbing can cause real harm to users with disabilities.

2. Standards Matter: Proprietary browser features create fragmentation and poor user experiences across different platforms.

3. User Control is Essential: Users should always have control over their browsing experience, including the ability to stop animations.

4. Less is More: The most effective design is often the simplest. Excessive visual effects rarely improve user experience.

The demise of the <blink> element paved the way for modern CSS animations that are more controllable, respect user preferences, and can be designed with accessibility in mind.

Final Advice

If you’re tempted to make text blink, flash, or move excessively, consider whether that content is truly important. If it is important, use static visual emphasis. If it’s not important enough to deserve static emphasis, it doesn’t need to blink.

Previous
<marquee> - Scrolling Text (Deprecated) Next
<tt> - Teletype Text (Deprecated)