the <marquee> tag

Though I've tried to avoid any use of proprietary or browser-specific tags in this course, I am making a small exception for this one. Technically the tag only works in Internet Explorer, but other tags will still render the text, just (usually) without the effects. Note well however that this tag is not part of the official XHTML 1.0 specification and if you use it your page will not validate.

What <marquee> does is create a scrolling text area. ("Marquee" is a term used in some other applications, such as graphics editors, to denote a selected area of the screen, but this is a usage that doesn't appear to have made it into the dictionary yet, where it's still just defined as "a big tent".) Such as the one below, for instance. If you're viewing this using Netscape you'll just see the text, so if you've access to IE, it might be better to have a quick look through that browser, just so you can see what I mean.

Enclose the text between the tags (<marquee> and </marquee>) in the usual way. There are several attributes which then control the appearance and the movement of the marquee, as follows:

behavior: (note spelling). Specifies how the text should behave. scroll is the default and means the text will start completely off one side, scroll across until it is completely off the other side, then start again if specified. slide stops the scroll when the text touches the far margin. alternate means it will "bounce" back and forth within the marquee.

bgcolor: takes a name or colour code and sets the marquee's background colour.

direction: takes left or right to define the direction in which the text will scroll.

height: defines the height in pixels of the marquee area.

hspace: use this to define a number of pixels to be held as free space to the left and right of the marquee.

loop: the default is infinite, which means the marquee will repeat endlessly. A number in this attribute stops the repetition after the specified amount of times.

scrollamount: specifies the number of pixels that the text will move for each "jump".

scrolldelay: specifies the delay, in milliseconds, between each "jump". Between them, these two attributes therefore allow close control over the speed of the scrolling display. Compare the two examples on this page for some idea of appropriate values here.

vspace: holds a number of pixels of free space to the top and bottom of the marquee.

width: defines the width of the marquee area. As usual with this attribute it can take either an absolute value (the number of pixels) or a percentage value, relative to the width of the element in which the marquee is located.

Note that there's no align attribute to help place the marquee between left and right margins, and the font of the marquee also depends on other tags for its formatting. Here, then, is the code which created the first marquee on this page.

<div>
<marquee direction="left" vspace="15" loop="3"
         scrollamount="2" scrolldelay="15" width="50%">
    Welcome to the Web Design Site!!
</marquee>
</div>

OK, having said all that, a word of warning. If you overdo moving text on a page - just as with the image equivalent, animations - it can be the most annoying and distracting thing. If using this tag give serious consideration to using the loop attribute to make it repeat only once or twice; the text's scrolling onto the screen in the first place will already have achieved the desired visual impact, so consider cutting your losses and leaving it at that. Too much of this kind of thing can spoil an otherwise attractive page, so use the <marquee> tag with discretion, like all other gimmicks.

Back to the top

Back to the menu of other topics