The marquee tag can be a very useful way to display on-sale items, special events, or breaking news. It just needs to be approached with some common design sense in mind. If you’ve never seen the marquee tag in action, you can think of it as a stock ticker–scrolling horizontally across the screen, usually entering from the right and exiting to the left. So let’s build one.

Open and close tags

Open your web development application of choice–we’ll use Notepad. Notepad isn’t typically our first choice, and it may not be your first choice either. We just like to reinforce the fact that web pages can be built using almost any word processing or text editing program, especially if you don’t have Dreamweaver, FrontPage, or one of the open source applications. You just need a good understanding of how the code works.

Enter the opening <marquee> tag and the closing </marquee> tag (A). Type the text you want displayed in between the two marquee tags (B). Save your file as marquee.html.


Test your html file by opening it in a web browser. We opened Internet Explorer and chose File > Open. Browse for your marquee.html file and click Open. The marquee tag is using its default attributes because we haven’t set any specific rules yet. The text should scroll from right to left at a medium pace (C).


Set the scrolling speed

To speed up or slow down the scroll rate of our marquee text, we’ll add the scrollamount attribute to the opening <marquee> tag. Type scrollamount=2 after the tag (D). Lower values will slow down the scrolling speed, higher values will speed it up. Save your html file and preview it in a web browser again. The text should scroll very slowly this time.


This speed is too slow. Set your speed to 4 and save your file again. Speeds higher than 5 make the text too hard to read and the effect becomes distracting.

To loop or not to loop?

You can set the number of cycles the marquee text is presented by adding the loop attribute. A value of -1 will loop the text forever. Any other number will loop the text that number of times and then stop. Type
loop=-1 after your scrollamount attribute (E). Save your html file.


Background color

Type bgcolor=yellow after your scroll attribute (F). Save the file and preview it in your web browser. The background of your marquee should be a bright yellow. You can also specify a hexidecimal number for the bgcolor value. To change the background color from yellow to lime green, enter #CCFF66 as the value for your bgcolor attribute (G). Save the file and then preview it in your web browser. The background of your marquee should be lime green now (H).




Format the text

Use font tags to edit the typeface, size, and color. Place an opening <font> tag before your marquee text and a closing </font> tag after it (I). In your opening <font> tag add the following code (J): face=arial size=4 color=purple. Save your file.



Add a link

The “Sign up today” text should link to a form. We’ll use the <a href> tag to target the html page with the form. Place the opening <a href> tag before the “Sign up today” text and the closing </a> tag after it. Surround the name of your form page with double quotes. Your finished code should look similar to ours (K). Save and preview the completed file in your web browser.