The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents.
Marquee can be distracting.[1] The human eye is attracted to movement,[2] and marquee text is constantly moving.
As with the blink element, marquee-tagged images or text are not always completely visible on rendered pages, making printing such pages an inefficient (if not impossible) task; typically multiple attempts are required to capture all text that could be displayed where messages scroll or blink. The behavior="alternate"
version of marquee makes text jitter back and forth but does not obscure any part of it if scrolling widths are set correctly.
Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. Also, scrolling text too fast can make it unreadable to some people, particularly those with visual impairments. This can easily frustrate users. To combat this, client-side scripting allows marquees to be programmed to stop when the mouse is over them.
Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee.
align
behavior
Loops are counted by each time it reaches each end of the marquee; a loop of 1 is different from 'Slide' attribute. when item is being scrolled with 'Slide' attribute, item will stop permanently at the end of length of the marquee, displaying the entire item. However, when an item is being scrolled without a 'Loop' attribute, the number of scrolls will be repeated according to what number 'Loop' is equal to. If 'Loop=1' then item will scroll only once and will exit the length of marquee completely, while the item being scrolled will stop would be the same as 'Slide'. By default, 'Loop=infinite' so it is not needed to code the attribute 'Loop' if you want a non-stop scroll. Note: 'Loop' will be ignored if attribute 'Behavior' is coded. Also, if 'Behavior=Alternate' and 'Loop=2' then item will go from beginning of the Marquee to the end and back to the beginning, counting a round trip as 2 loops.
bgcolor
direction
direction=left
therefore moves the text from right to left on the screen.width
loop
scrollamount
scrolldelay
A marquee element can contain arbitrary HTML, so in addition to text it could move one or more images, movie clips, or animated GIFs.
The marquee tag has been deprecated in most browsers, but the same behavior can still be implemented with Cascading Style Sheets, like this:
.marquee-container
.marquee-content The animation, marquee
, is defined by its @keyframes
to be a simple translation from right to left; it would be possible to reverse the animation by inverting it (from -100% to 100%, for example). The 10s
can also be modified to alter its output.
The style can then be invoked in HTML:
The freakin' geese are on the lease!
The marquee element was first invented for Microsoft's Internet Explorer and is supported by it. Firefox, Chrome and Safari web browsers support it for compatibility with legacy pages. The element is non-compliant HTML. CSS properties were proposed to achieve the same effect as specified in the Marquee Module Level 3, which was abandoned without implementation in 2014.[3] Similar effects can also be achieved through the use of JavaScript,[4] or CSS3 animations.[5]