Still Using HTML Marquee Tags? Find Out Why They Aren't Recommended

What does Still Using HTML Marquee Tags? Find Out Why They Aren't Recommended 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

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

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:

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.

This code:

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

Produces this:

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:

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>

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:

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:

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:

<MARQUEE LOOP=2>Hello</MARQUEE>

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 BEHAVIOR=SLIDE:

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

Claire Broadley

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.