Hypertext Markup Language (HTML) is one the cornerstones of building web applications and web pages and has been for decades.
Along with Cascading Style Sheets (CSS) and JavaScript, HTML forms the basis for the most popular technologies for creating sites on the world wide web.
First released in 1993 and with its latest release being HTML5, web page constructs that utilize HTML elements can be easily understood and transformed into interactive web pages by a variety of browsers.
HTML offers web page developers a set of building blocks that generate structured pages, handling images, headings, lists, links, and other elements consistently and efficiently.
Information provided to a web browser through HTML, CSS, and scripts such as those provided through JavaScript code generate the appearance and functionality experienced by viewers of the associated websites.
HTML “tags” provide information to the browser that defines the type of data or function to be applied to the associated elements of the web page. Examples are:
- <body> provides a definition of the document’s body
- <button> defines a button that is clickable to the browser
- <header> defines the section or document header
- <img> provides image definition
- <meta> defines the metadata for the HTML document
Standards are maintained and set for CSS and HTML by the World Wide Web Consortium (W3C). These standards, though not binding and mandatory, are strong recommendations by the technical community that forms the W3C to adhere to best practices and guidelines for consistency in web design and development.
Most popular web browsers tend to adhere to the standards published by W3C to promote compatibility and a more universal set of coding practices.
What Is a Blink HTML Tag and How Does It Work?
One HTML tag that may not be as well-known or frequently used is the <blink> HTML tag. Blink is a non-standard tag that can be utilized to create enclosed text that blinks – or flashes – slowly.
Most web page developers have avoided the use of this tag, mainly due to the reaction of web page visitors who deemed the effect annoying, with text turning off and on. The blink effect makes the text image alternate between being visible and invisible.
Few modern web browsers still support the blink HTML tag, and some – such as Internet Explorer – never supported the blink HTML tag at all.
Blink HTML tag syntax includes an open and close pair of tags: <blink> and </blink>
respectively.
In practice, different browsers will handle the blink html tag differently (if they recognize it at all). For example, the Firefox browser interprets the blink tag to make the associated text invisible for ¼ second,then visible for ¾ second, alternating between the two effects.
Alternatives to the Blink HTML Tag
The blink HTML tag was always seen as a non-standard tag that few browsers supported, and most that supported the element in the past have since dropped support of the tag. Even the Opera browser, which once did support the blink tag, ended support of that attribute long ago, with version 15 of the browser.
But even if the blink HTML tag is largely unsupported and will not be recognized by most browsers, there are other ways to accomplish a similar effect.
CSS Code There is a method through CSS to provide a blinking effect. Using the CSS animation properties along with definition utilizing the @keyframes rule, you can generate blinking text. Try this sample code from ComputerHope.com to create a blink class and put it into use.
<style type "text/css">
<!--
/* @group Blink */
.blink {
-webkit-animation:
blink .75s linear infinite;
-moz-animation:
blink .75s linear infinite;
-ms-animation:
blink .75s linear infinite;
-o-animation:
blink .75s linear infinite;
animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
/* @end */
-->
</style>
Once you create the above code, you’re ready to apply the class to the text of your choice, such as:
<p class="tab blink">Here is some blinking text.</p>
Modifying the code examples to utilize different values will allow you to “tweak” the code until you get the results you want to present to the viewer.
Microsoft also created a proprietary blink HTML tag to be used with their Internet Explorer browser. The tag was never adopted as part of the HTML, but subsequently dropped it altogether, and it is no longer supported even by Internet Explorer.
CSS at one time could provide the effect through the “text-decoration: blink” specification, but this too is a non-standard method of producing blinking text, and is not a working solution for most browsers today.
JavaScript JavaScript provides a more functional and supported method
for presenting blinking text on your web page:
var blink_speed = 500; var t = setInterval(function () { var ele = document.getElementById('blinker'); ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden'); }, blink_speed);
Keep in mind that if you’re thinking about including blinking text on your web page, you should probably reconsider, with the many concerns and cautions against using such an effect on your web pages.
Why Blink Is a Bad Idea
There are many reasons or opinions that back up the recommendation that blinking on a web page is not only a bad idea or distracting for website visitors but is strongly opposed by organizations and standards institutions.
W3C’s own Web Content Accessibility Guidelines (WCAG) provide a great deal of information related to why “blink” is not a good practice. Some of the key reasons to avoid the use of blinking text are:
- W3C agrees with the general consensus that blinking text is annoying and detracts from the overall appearance of a web page.
- Even the “creator” of the blink concept (most often credited to Lou Montulli, a Netscape engineer) opines that his creation was likely the “most hated of all HTML tags”.
- Apple advised developers to avoid the practice as far back as 1982, with their suggested guidance that “flashing text should only be used to indicate imminent destruction of data or the program”.
- From a practical viewpoint, there is documented evidence of the negative impact blinking video segments can have on individuals who have certain disabilities. In fact, the W3C Web Content Accessibility Guidelines (WCAG) go into great detail regarding standards for “flashing” content on web pages, highlighting the detrimental effect it presents to individuals with certain disabilities or those who are subject to seizures triggered by visual stimulation
- Specifically, the standard calls for thecapability for web users to stop or hide the effect:
“Moving, blinking, scrolling - For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential”
Although the standard admits there could be overlap in the definition of blinking vs. flashing, adoption or use of all such negative effects is to be avoided in nearly all cases.
Utilizing a Blink HTML Tag
Although the blink HTML tag is officially in a non-supported status for all popular browsers, you can still utilize the effect through other means (JavaScript or CSS methods). Still, the technique or any use of blinking text is not advised as a good practice.
Most developers or website visitors consider a blink HTML tag or blinking text on a web page through any means to be:
- Distracting
- Annoying
- Potentially unhealthy
There are many HTML tags and CSS decorations or animations that are much more attractive and appropriate for your web pages. Consider the use of other techniques over blinking or flashing presentations.
Keywords: blink html
.
What do you think?