How to Make Text Blink in HTML

By Paul K. Sholar

There are four ways to cause a Web page to display blinking text when the page is displayed in a Web browser. You can use the HTMLtag to affect the display of any text on the Web page. You can add the declaration "text-decoration: blink" in the Web page's HTML file. You can add the declaration "text-decoration: blink" in the Cascading Style Sheet (CSS) file that governs the display of the Web page. Or you can add custom JavaScript code in the Web page's HTML file that causes the text to blink, that is, to appear and disappear repeatedly.

Things You'll Need

  • Web browser
  • Text editor

Add the HTMLtag in the Web page's HTML file

Step 1

Run the text editor, then open the file that contains the Web page's text. The file's name extension can be .htm, .html, .xhtml, .xhtm, or others.

Step 2

Enclose between the HTML tagsandthe text you want to appear blinking. You can use thetag with any text that is displayed on the Web page, such as in headings, in paragraphs, or in tables.

Step 3

Save the text file you just edited.

Add the declaration "text-decoration: blink" in the Web page's HTML file

Step 1

Run the text editor, then open the file that contains the Web page's text. The file's name extension can be .htm, .html, .xhtm, .xhtml, or others.

Step 2

Check whether the HTML file includes a line that reads "

", add the line of text shown in this example. As an example, this line causes all text on this Web page with the tag "

" to appear blinking. Use this technique to affect any heading text (h1, h2, h3, ... h6), the entire body of the Web page (body), or text having a particular HTML tag.

Step 4

Save the text file you just edited.

Add the "text-decoration: blink" declaration in the CSS file that governs display of the Web page

Step 1

Start the text editor, then open the Cascading Style Sheet (CSS) file that controls the presentation of the Web page with text you want to appear blinking. The file's name extension can be .css or others. It might, or might not, be found in the same folder or directory as the HTML files whose display it governs.

Step 2

In the CSS file, look for either of the two lines shown in this example. In the example, the ellipses ("...") indicate that any text might be found in that part of the line in your CSS file.

Step 3

Add or edit the lines as shown in this example. For any HTML file that refers to this CSS file, the new line causes all text marked with the "

" tag to appear blinking when viewed in the Web browser.

Step 4

To cause only a piece of text tagged with a given ID to appear blinking, edit the CSS file and HTML file as shown in this example. In the HTML file, to declare this ID, you can edit the HTML tag in this way for any piece of text.

Add custom JavaScript code in the Web page's HTML file

Step 1

Start the text editor. In a new text file, enter the lines shown in this example. Save the text into a file with name extension .htm.

Step 2

Open the new HTML file in your Web browser. Notice that the line "Your text" is blinking. This result should occur in almost any Web browser--including Microsoft Internet Explorer--in which JavaScript is enabled.

Step 3

To use the JavaScript program shown in the example, copy the lines of the program from the new HTML file and paste them into another HTML file after the line with the tag "

". In the other HTML file, ensure that the line with the tag "" includes inside the brackets this text: onload="setInterval('blinkIt()',500)"

View the Web page that shows blinking text

Step 1

Start your Web browser.

Step 2

Open the HTML file in the Web browser. There are three ways to do so: -Drag the file's icon into the browser's window.-Select the File > Open command and use the Open dialog to select the file to open. -Enter the file's name in the browser's Location (or URL) field.

Step 3

As shown in this example, if you logged on your computer as "JBrown" and the file My-File.html is found on your Desktop, then on a Windows PC enter file:///C:/Documents%20and%20Settings/JBrown/Desktop/My-File.html and press Enter, or on a Mac enter file:///Users/JBrown/Desktop/My-File.html and press Enter.

Tips & Warnings

  • For some Web browsers that can display blinking text, the user can override this capability using the browser's own settings. For instance, as a user convenience, the Mozilla Firefox browser's about:config setting "browser.blink_allowed" determines whether text tagged as blinking actually appears blinking.
  • Note that the HTMLtag is not "standard" HTML and has never been supported by all versions of all Web browsers, including Microsoft Internet Explorer. This technique is not recommended for displaying blinking text on Web pages you expect to be viewed in future Web browsers.
  • The "text-decoration: blink" declaration is considered standard in the CSS 1 recommendation and CSS 2.1 specification published by the World Wide Web Consortium, the international standard-making organization for the Web. That declaration should be supported now and in the future by all major Web browsers that adhere to international standards.
  • Using blinking text on a Web page is not a recommended practice. One reason is that a reader subject to epileptic seizures can react negatively when viewing blinking text. Also, blinking text on a page strongly attracts the eye's attention, even when viewing other parts of the page, and so can be considered irritating or annoying to the reader.

References & Resources