Blinking text has never been part of HTML's standard features and there is no approach that works for every browser. The most similar option that only uses html is the marquee tag, but even it doesn't work with Google Chrome. Javascript is a more reliable method and you can cut and paste the code directly into your HTML document.
Steps
Method 1 of 2: Using the marquee tag
Step 1. Only use the marquee tag for personal projects
The marquee tag is outdated and developers strongly recommend avoiding it. Different browsers will display it differently and future updates may prevent the text from blinking altogether. Instead, learn the Javascript approach if you're going to create a professional website.
Google Chrome does not support the 'scrollamount' attribute, which this method relies on. In that browser, your text scrolls across the page instead of blinking
Step 2. Insert the marquee tags around the flashing text
Open your HTML document in a simple word processor. Type for the text you want to flash. Type after the text.
As always, first set up your html page with,, and tags
Step 3. Set the text width
Change the opening tag to. This does not change your font size. There are two reasons why you may need to change this to a different number:
- If your text doesn't fit, it will roll instead of blink. Increase the width to avoid this.
- In Chrome, the text will roll over a distance determined by its width.
Step 4. Set the scrollamount to the same value as the width
Within the same tag you write scrollamount='300' (or the same number as the width). By default, the marquee text scrolls across the screen. By setting the scrollamount to the same number as the width, the text will 'scroll' in the same position it was in before. This gives a blinking effect.
-
Your text should now look something like this:
Blinking text here..
Step 5. Change the scroll delay
Open the html file in a web browser to see the effect. If the text flashes too fast or too slow, change the speed with the attribute scrolldelay='500'. The default delay is set to 85. Use a higher number for a slower blink or a lower number for a faster blink.
-
You should now have:
Blinking text here.
Step 6. Limit the number of flashes (optional)
Many web users find blinking text annoying. To stop the animation once you have the reader's attention, enter loop='7'. Now the text will blink seven times and then disappear. (You can use any number instead of seven.)
-
The completed code:
Blinking text here.
Method 2 of 2: Using JavaScript
Step 1. Insert a blink script at the header of your html document
Between the and tags of your HTML document, insert the following JavaScript code:
-
function blinktext() {
var f=document.getElementById('announcement');
setInterval(function() {
f.style.visibility=(f.style.visibility=='hidden' ?'': 'hidden');
}, 1000);
}
Step 2. Insert the command to load your script
The code above defined a function and called it 'blinktext'. To use this function in your html, change the tag to.
Step 3. Define your blinking text as an announcement
This script only affects elements with the id 'announcement'. Place your blinking text inside each element and give it that id. For example, type
Blinking text here.
or Blinking text here..
You can rename this to anything you want. Just make sure you use the same word in the script and the element id
Step 4. Customize the script
The number '1000' in the script sets the delay between blinks. This is in microseconds, so a value of 1000 will make the text blink once per second. Change this to a lower number to speed up the blinking or a higher number to slow it down.
The actual delay will probably not be quite equal to this value. It is usually a little shorter, but can take longer if your browser is busy with other requests
Tips
- You can customize the look of the marquee text with the style attribute. Try adding.
- You can also include a height attribute in the marquee tag in addition to width, but many browsers will ignore that. You may notice a difference if you add a border to the marquee.
- You can also use CSS Animations to make text blink. This is quite difficult and not recommended for beginners in CSS. Note that you must have a linked CSS document, as Firefox does not support CSS Animations with inline CSS.