Re­sur­rec­tion of the Blink Tag

In the early days of the internet, not everything has been bad at all. There were a lot of useful and good ways to make websites visually interesting. Especially worth mentioning are the handy framesets as well as fantastic table-based web designs - nowadays, corresponding designs can only be reproduced with a lot of effort and complicated CSS3. Two other helpful tags were the Marquee tag and the Blink tag. Both were excellent for highlighting information and beautifying websites - e.g. by flashing important headlines, menu items, text paragraphs or entire tables. Unfortunately, these tags do not work reliably in current browsers at the moment. However, we have a solution for the blink tag at least!

Status Quo in HTML5 & Co

During the evolution of HTML4 and XHTML, carelessness was shown and important functions were forgotten to be migrated to the new standards. According to Can I Use, the blink tag is still not available since Opera 15 and Firefox 22. However, Can I Use does not even list the Netscape Navigator in the list of browsers!!1 After the W3C noticed these errors, they simply listed the tags in the documentation as "obsolete" and "deprecated" - life can be that simple ¯\_(ツ)_/¯.

However, the fact that the blink tag is very useful and important for a good user experience can be proven beyond doubt by the fact that Google has implemented the function in its own SERPs. Therefore, we looked for a generally valid solution to make the tag usable again.

How to use the Blink Tag correctly?

The blink tag is a simple HTML element that could be used anywhere. The content within the tag is highlighted by a nice and pleasant blinking animation.

Example

A typical example of use looks like this, for example:

<table border=20 bgcolor=green bordercolor=purple>
 <tr>
  <td>
   <h1>
    <font size=+4 color=red>
     <b><blink>Hello World! I'm blinking.</blink></b>
    </font>
   </h1>
  </td>
 </tr>
</table>

Unfortunately, one finds that the blink tag no longer has any effect. But there is a workaround.

Blink Tag Polyfill

If you want to bring the blink tag back to life, you can easily do so by adding the following code to each HTML file in the header:

<style>
 @keyframes blink-tag {
  to { visibility: hidden; } 
 } 
 blink { 
  animation: blink-tag 1s steps(5, start) infinite;
 } 
 </style>

Et voilà! From now on, the blink tag can be used again. Here's the example in action and as a free download!

Good old Days

We want to continue the series about solid old technology; the following topics are planned:

• Marquee-Tag-Polyfill based on jQuery (April 1, 2023)
• How to replace box-shadow by gifs and tables (April 1, 2024)
• Polyfill for framesets based on DHTML (April 1, 2025)
• Desktop First - proper design with table designs (April 1, 2026)