How to Make Text Blink in HTML

Techwalla may earn compensation through affiliate links in this story.

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 HTML <blink> tag 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.

Advertisement

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.

Video of the Day

Step 2

Enclose between the HTML tags <blink> and </blink> the text you want to appear blinking. You can use the <blink> tag with any text that is displayed on the Web page, such as in headings, in paragraphs, or in tables.

Advertisement

Step 3

Save the text file you just edited.

Step 4

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.

Advertisement

Step 5

Check whether the HTML file includes a line that reads "<style type="text/css">". If not, after the line that reads "<head>" add the lines shown in this example.

Advertisement

Advertisement

Step 6

Between the line that reads "<style type="text/css">" and the line that reads "</style>", add the line of text shown in this example. As an example, this line causes all text on this Web page with the tag "<h1>" 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.

Advertisement

Step 7

Save the text file you just edited.

Step 8

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.

Advertisement

Advertisement

Step 9

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.

Advertisement

Step 10

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 "<p>" tag to appear blinking when viewed in the Web browser.

Advertisement

Advertisement

Step 11

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.

Advertisement

Step 12

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.

Advertisement

Step 13

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.

Advertisement

Step 14

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 "<body>". In the other HTML file, ensure that the line with the tag "<body>" includes inside the brackets this text: onload="setInterval('blinkIt()',500)"

Step 15

Start your Web browser.

Step 16

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 17

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.

Things You'll Need

  • Web browser

  • Text editor

Tip

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 HTML <blink> tag 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.

Warning

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.

Advertisement

Advertisement