What does <marquee> do?
The <marquee> element was used to identify text that should move across a defined section of a webpage in a horizontal or vertical direction. The element has been deprecated and should no longer be used. CSS or JavaScript can be used to create similar effects.
Display
inline
Usage
textual

The Marquee Element

The Marquee Tag is Obsolete
This element is obsolete and should not be used. Browser support for this element is limited and using it may produce unexpected results. The following tutorials are for historical value only.

<MARQUEE ...> creates a scrolling display. <MARQUEE ...> is an MSIE extension, but is now supported by NS 7. <MARQUEE ...> is often regarded as one of the "evil" tags, and that perception alone might be enough reason to not use it. However, used lightly and with taste (and understanding that it will never render everywhere), <MARQUEE ...> isn't such a bad tag. It can work well for announcements.

The basic use of <MARQUEE ...> is simple. Put most any kind of markup between <MARQUEE ...> and </MARQUEE>.


Hi There!

<MARQUEE ...> is a text level element. By default <MARQUEE ...> has a WIDTH of 100%, so it might appear as a block level. However, if you set the width to something smaller than 100%, you might notice that the marquee is in line with the surrounding text.

This is stuff before the marquee.Hi there!This is stuff after the marquee

Is it inline?

The content of <MARQUEE ...>does not start scrolling until the <MARQUEE ...> element becomes visible.

Width and Height Attributes

WIDTH and HEIGHT set the dimensions of the marquee.

<MARQUEE WIDTH=200 HEIGHT=50>
Howdy!
</MARQUEE>

This code creates a marquee that is 200 pixes wide and 50 pixels tall:


Howdy!

Neither attribute is required. The default value for WIDTH is 100%. The HEIGHT defaults to the natural height of content as it appears in the width.


Happy Halloween!

picture of a pumpkin

The Direction Attribute

DIRECTION indicates which direction the marquee scrolls. DIRECTION=LEFT, which is the default, indicates that the marquee starts at the right and moves leftwards across the page. DIRECTION=RIGHT indicates that the marquee starts at the left and moves rightwards across the page.

This code:

<MARQUEE DIRECTION=LEFT>Hi There.</MARQUEE>
<MARQUEE DIRECTION=RIGHT>Hi There.</MARQUEE>

Produces this:

Hi There.
Hi There.

The Behavior Attribute

BEHAVIOR indicates how the contents scroll.

BEHAVIOR=SCROLL, which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side. This code:

<MARQUEE BEHAVIOR=SCROLL>Hello</MARQUEE>

Produces this:

Hello

BEHAVIOR=SLIDE is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. Notice in this example that the contents stop scrolling as soon as the "H" reaches the left side:

<MARQUEE BEHAVIOR=SLIDE>Hello</MARQUEE>
Hello

BEHAVIOR=ALTERNATE makes the content bounce back and forth, all of it remaining visible all the time (assuming of course that it all fits).

This code:

<MARQUEE BEHAVIOR=ALTERNATE>Hello</MARQUEE>

Produces this result:

Hello

The Scrolldelay Attribute

SCROLLDELAY, together with SCROLLAMOUNT, sets the speed of the scrolling. Marquee moves the content by displaying the content, then delaying for some short period of time, then displaying the content again in a new position. SCROLLDELAY sets the amount of delay in milliseconds (a millisecond is 1/1000th of a second). The default delay is 85.

The following examples show the default SCROLLDELAY (i.e. when it is not set), a value of 500 (half a second) and 1000 (one full second).

<MARQUEE>Hello</MARQUEE>
<MARQUEE SCROLLDELAY=500>Hello</MARQUEE>
<MARQUEE SCROLLDELAY=1000>Hello</MARQUEE>
Hello
Hello
Hello

SCROLLDELAY is good for making the marquee slower than the default but it's not much help in speeding it up. Try SCROLLAMOUNT to speed up the marquee.

The Scrollamount Attribute

SCROLLAMOUNT, together with SCROLLDELAY, sets the speed of the scrolling. Marquee moves the content by displaying the content, then delaying for some short period of time, then displaying the content again in a new position. SCROLLAMOUNT sets the size in pixels of each jump. A higher value for SCROLLAMOUNT makes the marquee scroll faster. The default value is 6.

The following examples demonstrate the default value for SCROLLAMOUNT, a value of 20 and 50.

<MARQUEE>Hello</MARQUEE>
<MARQUEE SCROLLAMOUNT=20>Hello</MARQUEE>
<MARQUEE SCROLLAMOUNT=50>Hello</MARQUEE>
Hello
Hello
Hello

The BGColor Attribute

BGCOLOR sets the background color of the marquee.

<MARQUEE BGCOLOR=YELLOW>Howdy there!</MARQUEE>

Gives us this marquee:

Howdy there!

HSpace and VSpace Attributes

HSPACE sets the horizontal space to the left and right of the marquee. VSPACE sets the vertical space at the top and bottom of the marquee.

HSPACE has no effect unless you also use the HSPACE attribute. These three code examples show the default value of HSPACE (which is 0) and two larger values:

<MARQUEE WIDTH="25%" BGCOLOR=YELLOW><p>Howdy there!</p><p>Good to see ya!</p></MARQUEE>Hi There!
<MARQUEE HSPACE=10 WIDTH="25%" BGCOLOR=YELLOW><p>Howdy there!</p><p>Good to see ya!</p></MARQUEE>Hi There!
<MARQUEE HSPACE=50 WIDTH="25%" BGCOLOR=YELLOW><p>Howdy there!</p><p>Good to see ya!</p></MARQUEE>Hi There!

Which give us these marquees:

Howdy there!

Good to see ya!

Hi There!

Howdy there!

Good to see ya!

Hi There!

Howdy there!

Good to see ya!

Hi There!

VSPACE sets the space between the marquee and text before and after. These code examples show the default value of VSPACE (also 0) and two larger values:

Hello.<MARQUEE BGCOLOR=YELLOW>Howdy there!</MARQUEE>Hi There!
Hello.<MARQUEE VSPACE=10 BGCOLOR=YELLOW>Howdy there!</MARQUEE>Hi There!
Hello.<MARQUEE VSPACE=50 BGCOLOR=YELLOW>Howdy there!</MARQUEE>Hi There!
Hello.Howdy there!Hi There!
Hello.Howdy there!Hi There!
Hello.Howdy there!Hi There!

The Loop Attribute

LOOP sets how many times the marquee should loop. The default value (i.e. if you don't put a LOOP attribute at all) is INFINITE, which means that the marquee loops endlessly.

This code creates a marquee that loops twice:

<MARQUEE LOOP=2>Hello</MARQUEE>

Here it is:

Hello

One of the problems with LOOP is that the content disappears after the last loop. To set the marquee so that the content is visible when the looping is done set BEHAVIOR=SLIDE:

<MARQUEE LOOP=2 BEHAVIOR=SLIDE>Hello</MARQUEE>
Hello