Blink Tag in HTML

In the early days of the internet, web designers and developers were eager to explore new ways to make their content stand out. One of the earliest and most controversial innovations was the <blink> tag, introduced by Netscape Navigator. This tag allowed text to blink, creating a flashing effect that was hard to ignore. However, despite its initial popularity, the blink tag quickly fell out of favor due to its overuse and the readability issues it caused. In this blog, we will explore the history, implementation, and eventual decline of the blink tag in HTML.

A Flashy Beginning

The blink tag was first introduced in Netscape Navigator, a popular web browser in the 1990s. Lou Montulli, often credited as the inventor of the blink element, claimed that he only suggested the idea and did not write any actual code. The inspiration for the blink tag came from a casual conversation among engineers, where they humorously discussed the idea of blinking text. One engineer found the idea so amusing that he implemented it overnight, and the blink tag was born.

Despite its non-standard status, the blink tag quickly gained popularity among home users who enjoyed its attention-grabbing effect. For example, a simple implementation of the blink tag would look like this:

<blink>This text could blink</blink>

The rate of blinking varied depending on the browser, with Mozilla Firefox displaying the text visible for three-quarters of a second and invisible for one-quarter of a second.

The Decline of the Blink Tag

As the internet matured, the blink tag became a source of frustration for many users and web designers. Overuse of the blink effect made web pages difficult to read and navigate. Moreover, some web browsers, like Internet Explorer, never supported the blink tag, leading to inconsistencies in web design.

In 1996, usability expert Jakob Nielsen described the blink element as “simply evil” in his column “Original Top Ten Mistakes in Web Design.” The blink tag also posed accessibility issues, particularly for people with cognitive disabilities or photosensitive epilepsy. The World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG) advised against using blinking text, emphasizing the importance of creating accessible content for all users.

The blink tag’s decline was further accelerated by an agreement between Netscape and Microsoft. During an HTML Editorial Review Board meeting in February 1996, Netscape agreed to remove the blink tag from their browser if Microsoft would remove the marquee tag from theirs. Both tags eventually disappeared from mainstream web development.

Modern Alternatives to the Blink Tag

Although the blink tag is no longer supported by modern browsers, similar effects can be achieved using CSS and JavaScript. For instance, the CSS text-decoration property allows authors to suggest that text should blink without using proprietary tags. However, the CSS 2.1 Specification states that “conforming user agents may simply not blink the text” to comply with User Agent Accessibility Guidelines.

Here’s an example of how to create a blinking effect using CSS animations:

.blink-css {
animation: blink 1s step-end infinite;
}

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

By applying the blink-css class to an element, the text will blink:

<span class=”blink-css”>This text will blink</span>

JavaScript can also be used to implement blinking text. Here’s a simple example using vanilla JavaScript:

(function() {
var blinks = document.getElementsByTagName(‘blink’);
var visibility = ‘hidden’;
window.setInterval(function() {
for (var i = blinks.length – 1; i >= 0; i–) {
blinks[i].style.visibility = visibility;
}
visibility = (visibility === ‘visible’) ? ‘hidden’ : ‘visible’;
}, 250);
})();

And the corresponding HTML:

<blink>This text will blink</blink>

Alternatively, jQuery can be used to achieve the same effect: