Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
HTML <blink> Tag

HTML <blink> Tag

By Shubhrima
3 mins read
Last updated: 4 May 2023
170 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The <blink> HTML tag is used to enclose text to create a blinking effect. Blinking refers to a light flashing on and off regularly or intermittently. However, the relevant web standards have removed this non-standard element.

html-blink

Syntax

The blink element comes in pairs, meaning the tag has an opening and closing element.

Attributes of <blink> Tag

The <blink> tag is a non-standard element that helps the text to flash in a regular pattern. Since its functioning solely depends on the browser, the <blink> tag does not require any parameters and has no attributes.

How to Use <blink> Tag in HTML?

The text that needs to have a blink effect is enclosed within the <blink> HTML tag. It is written in line with the rest of the content, as shown below.

Note: Since the <blink> HTML tag is deprecated no visual effect is seen on using it. Though some browsers might still support it for compatibility purposes, most consider the <blink> element obsolete. It is recommended to not use this tag, and update existing codes to avoid compatibility issues, as the feature may stop working at any time.

Example

Example 1: Using JavaScript to Create a Blinking Effect

JavaScript can be used to add blinking functionality to desired elements. In this example, the following CSS code is used only for styling purposes.

Code

HTML

CSS

JavaScript

Output

output-using-javascript-to-create-blink

CSS can add visual blinking effects in two ways.

  1. Using text-decoration property -Setting the value of the text-decoration property to blink can fetch the desired result in some cases. However, it is not a viable solution as most browsers do not support it.
  2. Using CSS animation - The goal can be achieved by setting CSS animations for the desired text using the @keyframes rule.

Code

HTML

CSS

Output

output-blink-tag-with-css-animation

No visual effect is noticed since the web browsers consider the <blink> HTML tag obsolete. In this example, the following CSS code is used only for styling purposes.

Code

HTML

CSS

Output

output-blink-tag-not-working

Styling the <blink> Tag

The following example shows you different ways to style a <blink> HTML tag.

  • In the first sentence, the blinking effect is applied by changing the text color.
  • In the second sentence, the blinking effect is applied using opacity.

Code

HTML

CSS

Output output-styling-blink-tag

Accessibility Concerns

Blinking is constant flashing that results in a negative user experience. Reading such text becomes difficult and annoying as the text continuously turns on and off. As per the internet guidelines blinking texts are not user-friendly for people with disabilities. Users with cognitive problems and photosensitive epilepsy might experience seizures when viewing flashing content.

Browser Support

The recent versions of the standard browsers do not support the <blink> HTML tag. Though some old versions use it for compatibility, it is a better practice to avoid its usage.

Conclusion

  • The <blink> HTML tag adds a slow flashy blinking effect to the text.
  • The tag is not standardized by hypertext mark-up language and has now been deprecated.
  • As most browsers do not support the <blink> HTML tag, a blinking effect can be created using CSS and JavaScript.
  • Internet usage guidelines strongly advise avoiding the usage of the blinking effect, as it can cause problems for disabled users.

Learn More