- What does
The Marquee Element Is History In HTML (And What To Use Instead)do?
The Marquee Element
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.
creates a scrolling display. is an MSIE extension, but is now supported by NS 7.
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), isn't such a bad tag. It can work well for announcements.
The basic use of
is simple. Put most any kind of markup between and “.
is a text level element. By default 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.
Is it inline?
The content of
does not start scrolling until the “ element becomes visible.
Width and Height Attributes
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:
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.
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.
<MARQUEE DIRECTION=LEFT>Hi There.</MARQUEE> <MARQUEE DIRECTION=RIGHT>Hi There.</MARQUEE>
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:
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:
BEHAVIOR=ALTERNATE makes the content bounce back and forth, all of it remaining visible all the time (assuming of course that it all fits).
Produces this result:
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>
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>
The BGColor Attribute
BGCOLOR sets the background color of the marquee.
<MARQUEE BGCOLOR=YELLOW>Howdy there!</MARQUEE>
Gives us this marquee:
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:
Good to see ya!
Good to see ya!
Good to see ya!
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!
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:
Here it is:
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
<MARQUEE LOOP=2 BEHAVIOR=SLIDE>Hello</MARQUEE>